ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-10 17:49:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into bwindels/make-reply-not-overlay

Browse Source
This commit is contained in:
Bruno Windels
2020-08-18 13:39:06 +02:00
parent fa1e27076d c91fc99d4b
commit 5d98805d77
278 changed files with 6448 additions and 3045 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.scss
+14 -89
View File
@@ -38,7 +38,7 @@ body {
margin: 0px;
// needed to match the designs correctly on macOS
// see https://github.com/vector-im/riot-web/issues/11425
// see https://github.com/vector-im/element-web/issues/11425
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -436,7 +436,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// 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.
// Ref: https://github.com/vector-im/riot-web/issues/8420
// Ref: https://github.com/vector-im/element-web/issues/8420
.mx_GeneralButton {
@mixin mx_DialogButton;
display: inline;
@@ -585,93 +585,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
max-width: 120px;
}
// A context menu that largely fits the | [icon] [label] | format.
.mx_IconizedContextMenu {
min-width: 146px;
.mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
// the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work
// around the problem. PostCSS doesn't support the opacity() function, and if we
// use something like postcss-functions we quickly run into an issue where the
// function we would define gets passed a CSS variable for custom themes, which
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
//
// Therefore, we just hack in a line and border the thing ourselves
&::before {
border-top: 1px solid $primary-fg-color;
opacity: 0.1;
content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding,
// unless we position it absolutely then it does the right thing).
width: 100%;
position: absolute;
left: 0;
}
}
// round the top corners of the top button for the hover effect to be bounded
&:first-child .mx_AccessibleButton:first-child {
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
}
// round the bottom corners of the bottom button for the hover effect to be bounded
&:last-child .mx_AccessibleButton:last-child {
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
}
.mx_AccessibleButton {
// pad the inside of the button so that the hover background is padded too
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
// Create a flexbox to more easily define the list items
display: flex;
align-items: center;
&:hover {
background-color: $menu-selected-color;
}
img, .mx_IconizedContextMenu_icon { // icons
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label { // labels
padding-left: 14px;
width: 100%;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
}
}
}
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
@@ -692,3 +605,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: $radius;
}
}
@define-mixin unreal-focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
/* WebKit gets its native focus styles. */
@media (-webkit-min-device-pixel-ratio: 0) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
res/css/_components.scss
+4 -2
View File
@@ -15,6 +15,7 @@
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss";
@import "./structures/_RightPanel.scss";
@import "./structures/_RoomDirectory.scss";
@@ -49,6 +50,7 @@
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@@ -70,11 +72,11 @@
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss";
@import "./views/dialogs/_RebrandDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
@@ -182,7 +184,6 @@
@import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTileIcon.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SendMessageComposer.scss";
@@ -215,6 +216,7 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
res/css/structures/_FilePanel.scss
+13 -3
View File
@@ -41,13 +41,19 @@ limitations under the License.
.mx_FilePanel .mx_EventTile {
word-break: break-word;
margin-top: 32px;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0px;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody {
line-height: 2.4rem;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
padding-top: 8px;
display: flex;
font-size: $font-14px;
color: $event-timestamp-color;
@@ -60,7 +66,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: $font-11px;
font-size: $font-14px;
text-align: right;
white-space: nowrap;
}
@@ -80,7 +86,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
font-size: $font-11px;
font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
}
@@ -90,7 +96,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
font-size: $font-11px;
font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
}
@@ -109,3 +115,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
.mx_FilePanel_empty::before {
mask-image: url('$(res)/img/element-icons/room/files.svg');
}
res/css/structures/_LeftPanel.scss
+1
View File
@@ -137,6 +137,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel_roomListWrapper {
overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter
flex: 1 0 0; // needed in Safari to properly set flex-basis
&.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
res/css/structures/_MainSplit.scss
+2
View File
@@ -23,6 +23,8 @@ limitations under the License.
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
// margin left to not allow the handle to not encroach on the space for the scrollbar
margin-left: 8px;
&:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes
res/css/structures/_MatrixChat.scss
+1 -1
View File
@@ -72,7 +72,7 @@ limitations under the License.
flex: 1 1 0;
min-width: 0;
/* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
/* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
res/css/structures/_NonUrgentToastContainer.scss
+35
View File
@@ -0,0 +1,35 @@
/*
Copyright 2020 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_NonUrgentToastContainer {
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101; // same level as other toasts
.mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
border-radius: 8px;
width: 320px;
font-size: $font-13px;
margin-top: 8px;
// We don't use variables on the colours because we want it to be the same
// in all themes.
background-color: #17191c;
color: #fff;
}
}
res/css/structures/_NotificationPanel.scss
+4
View File
@@ -99,3 +99,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
.mx_NotificationPanel_empty::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
res/css/structures/_RightPanel.scss
+27 -2
View File
@@ -64,7 +64,7 @@ limitations under the License.
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $rightpanel-button-color;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
@@ -99,7 +99,7 @@ limitations under the License.
background: rgba($accent-color, 0.25);
// make the icon the accent color too
&::before {
background-color: $accent-color;
background-color: $accent-color !important;
}
}
@@ -144,3 +144,28 @@ limitations under the License.
order: 2;
margin: auto;
}
.mx_RightPanel_empty {
margin-right: -42px;
h2 {
font-weight: 700;
margin: 16px 0;
}
h2, p {
font-size: $font-14px;
}
&::before {
content: '';
display: block;
margin: 11px auto 29px auto;
height: 42px;
width: 42px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}
res/css/structures/_TagPanel.scss
+3 -4
View File
@@ -108,13 +108,12 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: calc(100% + 16px);
height: 100%;
background-color: $accent-color;
width: 5px;
width: 4px;
position: absolute;
left: -15px;
left: -12px;
border-radius: 0 3px 3px 0;
top: -8px; // (16px from height / 2)
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
res/css/structures/_ToastContainer.scss
-4
View File
@@ -80,10 +80,6 @@ limitations under the License.
}
}
&.mx_Toast_icon_element_logo::after {
background-image: url("$(res)/img/element-logo.svg");
}
.mx_Toast_title, .mx_Toast_body {
grid-column: 2;
}
res/css/structures/_UserMenu.scss
+1 -6
View File
@@ -89,15 +89,10 @@ limitations under the License.
.mx_UserMenu_contextMenu {
width: 247px;
.mx_UserMenu_contextMenu_redRow {
&.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
res/css/views/avatars/_BaseAvatar.scss
+1 -1
View File
@@ -22,7 +22,7 @@ limitations under the License.
// different results during full reflow of the page vs. incremental reflow
// of small portions. While that's surely a browser bug, we can avoid it by
// using `inline-block` instead of the default `inline`.
// https://github.com/vector-im/riot-web/issues/5594
// https://github.com/vector-im/element-web/issues/5594
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
res/css/views/avatars/_DecoratedRoomAvatar.scss
+42 -3
View File
@@ -18,10 +18,49 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative;
.mx_RoomTileIcon {
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
.mx_DecoratedRoomAvatar_icon {
position: absolute;
bottom: 0;
right: 0;
bottom: -2px;
right: -2px;
margin: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.mx_DecoratedRoomAvatar_icon::before {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 8px;
}
.mx_DecoratedRoomAvatar_icon_globe::before {
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
mask-image: url('$(res)/img/globe.svg');
}
.mx_DecoratedRoomAvatar_icon_offline::before {
background-color: $presence-offline;
}
.mx_DecoratedRoomAvatar_icon_online::before {
background-color: $presence-online;
}
.mx_DecoratedRoomAvatar_icon_away::before {
background-color: $presence-away;
}
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
res/css/views/context_menus/_IconizedContextMenu.scss
+148
View File
@@ -0,0 +1,148 @@
/*
Copyright 2020 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.
*/
// A context menu that largely fits the | [icon] [label] | format.
.mx_IconizedContextMenu {
min-width: 146px;
.mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
// the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work
// around the problem. PostCSS doesn't support the opacity() function, and if we
// use something like postcss-functions we quickly run into an issue where the
// function we would define gets passed a CSS variable for custom themes, which
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
//
// Therefore, we just hack in a line and border the thing ourselves
&::before {
border-top: 1px solid $primary-fg-color;
opacity: 0.1;
content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding,
// unless we position it absolutely then it does the right thing).
width: 100%;
position: absolute;
left: 0;
}
}
// round the top corners of the top button for the hover effect to be bounded
&:first-child .mx_AccessibleButton:first-child {
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
}
// round the bottom corners of the bottom button for the hover effect to be bounded
&:last-child .mx_AccessibleButton:last-child {
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
}
.mx_AccessibleButton {
// pad the inside of the button so that the hover background is padded too
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
// Create a flexbox to more easily define the list items
display: flex;
align-items: center;
&:hover {
background-color: $menu-selected-color;
}
img, .mx_IconizedContextMenu_icon { // icons
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label { // labels
padding-left: 14px;
width: 100%;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_IconizedContextMenu_optionList_red {
.mx_AccessibleButton {
color: $warning-color !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_IconizedContextMenu_active {
&.mx_AccessibleButton, .mx_AccessibleButton {
color: $accent-color !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
}
}
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
}
}
.mx_IconizedContextMenu_checked {
margin-left: 16px;
margin-right: -5px;
&::before {
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
}
}
res/css/views/dialogs/_RebrandDialog.scss
-63
View File
@@ -1,63 +0,0 @@
/*
Copyright 2020 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_RebrandDialog {
text-align: center;
a:link,
a:hover,
a:visited {
@mixin mx_Dialog_link;
}
.mx_Dialog_buttons {
margin-top: 43px;
text-align: center;
}
}
.mx_RebrandDialog_body {
width: 550px;
margin-left: auto;
margin-right: auto;
}
.mx_RebrandDialog_logoContainer {
margin-top: 35px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.mx_RebrandDialog_logo {
margin-left: 28px;
margin-right: 28px;
width: 64px;
height: 64px;
}
.mx_RebrandDialog_chevron::after {
content: '';
display: inline-block;
width: 24px;
height: 24px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
}
res/css/views/dialogs/_ServerOfflineDialog.scss
+72
View File
@@ -0,0 +1,72 @@
/*
Copyright 2020 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_ServerOfflineDialog {
.mx_ServerOfflineDialog_content {
padding-right: 85px;
color: $primary-fg-color;
hr {
border-color: $primary-fg-color;
opacity: 0.1;
border-bottom: none;
}
ul {
padding: 16px;
li:nth-child(n + 2) {
margin-top: 16px;
}
}
.mx_ServerOfflineDialog_content_context {
.mx_ServerOfflineDialog_content_context_timestamp {
display: inline-block;
width: 115px;
color: $muted-fg-color;
line-height: 24px; // same as avatar
vertical-align: top;
}
.mx_ServerOfflineDialog_content_context_timeline {
display: inline-block;
width: calc(100% - 155px); // 115px timestamp width + 40px right margin
.mx_ServerOfflineDialog_content_context_timeline_header {
span {
margin-left: 8px;
vertical-align: middle;
}
}
.mx_ServerOfflineDialog_content_context_txn {
position: relative;
margin-top: 8px;
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px); // 100px is an arbitrary margin for the button
}
.mx_AccessibleButton {
float: right;
padding: 0;
}
}
}
}
}
}
res/css/views/dialogs/_ShareDialog.scss
+2 -1
View File
@@ -51,7 +51,8 @@ limitations under the License.
display: inherit;
}
.mx_ShareDialog_matrixto_copy > div {
background-image: url($copy-button-url);
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
margin-left: 5px;
width: 20px;
height: 20px;
res/css/views/directory/_NetworkDropdown.scss
+5 -4
View File
@@ -145,13 +145,14 @@ limitations under the License.
&::after {
content: "";
position: absolute;
width: 24px;
height: 24px;
right: -28px; // - (24 + 4)
width: 26px;
height: 26px;
right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
top: -3px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color;
}
res/css/views/elements/_StyledCheckbox.scss
+6
View File
@@ -80,5 +80,11 @@ limitations under the License.
background-color: $accent-color;
border-color: $accent-color;
}
&.focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
}
}
}
}
res/css/views/elements/_StyledRadioButton.scss
+7
View File
@@ -63,6 +63,7 @@ limitations under the License.
box-sizing: border-box;
height: $font-16px;
width: $font-16px;
margin-left: 2px; // For the highlight on focus
border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px;
@@ -77,6 +78,12 @@ limitations under the License.
}
}
&.focus-visible {
& + div {
@mixin unreal-focus;
}
}
&:checked {
& + div {
border-color: $active-radio-circle-color;
res/css/views/messages/_MImageBody.scss
+1
View File
@@ -25,6 +25,7 @@ limitations under the License.
height: 100%;
left: 0;
top: 0;
border-radius: 4px;
}
.mx_MImageBody_thumbnail_container {
res/css/views/messages/_MessageActionBar.scss
+2 -2
View File
@@ -24,7 +24,7 @@ limitations under the License.
line-height: $font-24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
top: -18px;
top: -26px;
right: 8px;
user-select: none;
// Ensure the action bar appears above over things, like the read marker.
@@ -41,7 +41,7 @@ limitations under the License.
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
height: calc(20px + 100%);
top: -20px;
top: -12px;
left: -58px;
z-index: -1;
cursor: initial;
res/css/views/rooms/_EventTile.scss
+3 -2
View File
@@ -536,11 +536,12 @@ $left-gutter: 64px;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 8px;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url($copy-button-url);
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
res/css/views/rooms/_IRCLayout.scss
+1 -1
View File
@@ -54,7 +54,7 @@ $irc-line-height: $font-18px;
flex-shrink: 0;
width: var(--name-width);
text-overflow: ellipsis;
text-align: right;
text-align: left;
display: flex;
align-items: center;
overflow: visible;
res/css/views/rooms/_JumpToBottomButton.scss
+2 -2
View File
@@ -67,8 +67,8 @@ limitations under the License.
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
mask-size: contain;
background: $muted-fg-color;
}
res/css/views/rooms/_MessageComposer.scss
+25 -5
View File
@@ -21,6 +21,7 @@ limitations under the License.
border-top: 1px solid $primary-hairline-color;
position: relative;
padding-left: 82px;
padding-right: 6px;
}
.mx_MessageComposer_replaced_wrapper {
@@ -178,25 +179,44 @@ limitations under the License.
color: $accent-color;
}
.mx_MessageComposer_button_highlight {
background: rgba($accent-color, 0.25);
// make the icon the accent color too
&::before {
background-color: $accent-color !important;
}
}
.mx_MessageComposer_button {
position: relative;
margin-right: 12px;
margin-right: 6px;
cursor: pointer;
height: 20px;
width: 20px;
height: 26px;
width: 26px;
border-radius: 100%;
&::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $composer-button-color;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
&.mx_MessageComposer_hangup::before {
background-color: $warning-color;
}
@@ -288,7 +308,7 @@ limitations under the License.
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: $composer-button-color;
background-color: $icon-button-color;
&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
res/css/views/rooms/_RoomHeader.scss
+1 -1
View File
@@ -222,7 +222,7 @@ limitations under the License.
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
res/css/views/rooms/_RoomList.scss
+7
View File
@@ -17,3 +17,10 @@ limitations under the License.
.mx_RoomList {
padding-right: 7px; // width of the scrollbar, to line things up
}
.mx_RoomList_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
}
.mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
res/css/views/rooms/_RoomSublist.scss
+17 -17
View File
@@ -120,7 +120,7 @@ limitations under the License.
}
.mx_RoomSublist_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
}
.mx_RoomSublist_menuButton::before {
@@ -142,26 +142,24 @@ limitations under the License.
.mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 12px;
height: 12px;
margin-right: 8px;
width: 14px;
height: 14px;
margin-right: 6px;
&::before {
content: '';
width: 12px;
height: 12px;
width: 18px;
height: 18px;
position: absolute;
top: 1px;
left: 1px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $primary-fg-color;
background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_RoomSublist_collapseBtn_collapsed::before {
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
transform: rotate(-90deg);
}
}
}
@@ -171,7 +169,7 @@ limitations under the License.
// that the sublists below them do not jump. However, that leaves a gap
// when scrolled to the top above the first sublist (whose header can only
// ever stick to top), so we force height to 0 for only that first header.
// See also https://github.com/vector-im/riot-web/issues/14429.
// See also https://github.com/vector-im/element-web/issues/14429.
&:first-child .mx_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
@@ -251,22 +249,24 @@ limitations under the License.
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
width: 18px;
height: 18px;
margin-left: 12px;
margin-right: 18px;
margin-right: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile-preview-color;
background: $roomlist-header-color;
left: -1px; // adjust for image position
}
.mx_RoomSublist_showMoreButtonChevron {
.mx_RoomSublist_showMoreButtonChevron,
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
transform: rotate(180deg);
}
}
res/css/views/rooms/_RoomTile.scss
-40
View File
@@ -175,48 +175,8 @@ limitations under the License.
.mx_RoomTile_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomTile_iconCheck::before {
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
.mx_RoomTile_contextMenu {
.mx_RoomTile_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_RoomTile_contextMenu_activeRow {
&.mx_AccessibleButton, .mx_AccessibleButton {
color: $accent-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_RoomTile_iconStar::before {
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
}
res/css/views/rooms/_RoomTileIcon.scss
-69
View File
@@ -1,69 +0,0 @@
/*
Copyright 2020 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_RoomTileIcon {
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $roomlist-bg-color; // to match the room list itself
}
.mx_RoomTileIcon_globe::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/globe.svg');
}
.mx_RoomTileIcon_offline::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-offline;
}
.mx_RoomTileIcon_online::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-online;
}
.mx_RoomTileIcon_away::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-away;
}
res/css/views/rooms/_TopUnreadMessagesBar.scss
+6 -5
View File
@@ -28,7 +28,7 @@ limitations under the License.
content: "";
position: absolute;
top: -8px;
left: 11px;
left: 10.5px;
width: 4px;
height: 4px;
border-radius: 16px;
@@ -49,12 +49,13 @@ limitations under the License.
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
width: 36px;
height: 36px;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
mask-size: contain;
background: $muted-fg-color;
transform: rotate(180deg);
}
.mx_TopUnreadMessagesBar_markAsRead {
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
-4
View File
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SecurityRoomSettingsTab label {
display: block;
}
.mx_SecurityRoomSettingsTab_warning {
display: block;
res/css/views/toasts/_NonUrgentEchoFailureToast.scss
+37
View File
@@ -0,0 +1,37 @@
/*
Copyright 2020 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_NonUrgentEchoFailureToast {
.mx_NonUrgentEchoFailureToast_icon {
display: inline-block;
width: $font-18px;
height: $font-18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: #fff; // we know that non-urgent toasts are always styled the same
mask-image: url('$(res)/img/element-icons/cloud-off.svg');
margin-right: 8px;
}
span { // includes the i18n block
vertical-align: middle;
}
.mx_AccessibleButton {
padding: 0;
}
}
res/img/element-icons/cloud-off.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.53033 0.46967C1.23744 0.176777 0.762563 0.176777 0.46967 0.46967C0.176777 0.762563 0.176777 1.23744 0.46967 1.53033L4.3982 5.45886C3.81109 6.13809 3.38896 7.01315 3.21555 7.99387C1.96379 8.20624 1 9.465 1 10.981C1 12.6455 2.16209 14 3.59014 14H12.9393L16.4697 17.5303C16.7626 17.8232 17.2374 17.8232 17.5303 17.5303C17.8232 17.2374 17.8232 16.7626 17.5303 16.4697L1.53033 0.46967ZM17 10.9817C16.998 11.8303 16.6946 12.5985 16.2081 13.1475L7.07635 4.01569C7.18805 4.00529 7.30083 4 7.41451 4C8.75982 4 9.99711 4.71787 10.8072 5.94503C11.0993 5.85476 11.4011 5.80939 11.7058 5.80939C13.0303 5.80939 14.2138 6.65743 14.8199 8.00337C16.0519 8.23522 17 9.48685 17 10.9817Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B

res/img/element-icons/roomlist/decorated-avatar-mask.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.7161 22.2903C31.5425 20.3595 32 18.2332 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C18.2332 32 20.3595 31.5425 22.2903 30.7161C20.8956 29.6174 20 27.9133 20 26C20 22.6863 22.6863 20 26 20C27.9133 20 29.6174 20.8956 30.7161 22.2903Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 444 B

res/img/element-icons/roomlist/explore.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM13.375 5.3266C13.5583 4.92826 13.0716 4.44152 12.6733 4.62491L7.66968 6.9285C7.33893 7.08077 7.08014 7.33956 6.92787 7.67031L4.62428 12.6739C4.44089 13.0722 4.92763 13.559 5.32597 13.3756L10.3295 11.072C10.6603 10.9197 10.9191 10.6609 11.0714 10.3302L13.375 5.3266Z" fill="black"/>
<path d="M9.8835 9.88413C9.39534 10.3723 8.60389 10.3723 8.11573 9.88413C7.62757 9.39597 7.62757 8.60452 8.11573 8.11636C8.60389 7.62821 9.39534 7.62821 9.8835 8.11636C10.3717 8.60452 10.3717 9.39597 9.8835 9.88413Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 775 B

res/img/element-icons/roomlist/plus.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 4C9.75 3.58579 9.41421 3.25 9 3.25C8.58579 3.25 8.25 3.58579 8.25 4V8.25L4 8.25C3.58579 8.25 3.25 8.58579 3.25 9C3.25 9.41421 3.58579 9.75 4 9.75L8.25 9.75V14C8.25 14.4142 8.58579 14.75 9 14.75C9.41421 14.75 9.75 14.4142 9.75 14V9.75L14 9.75C14.4142 9.75 14.75 9.41421 14.75 9C14.75 8.58579 14.4142 8.25 14 8.25L9.75 8.25V4Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 499 B

res/img/element-logo.svg
-6
View File
@@ -1,6 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64001 1.44C8.64001 0.64471 9.28472 0 10.08 0C15.3819 0 19.68 4.29807 19.68 9.6C19.68 10.3953 19.0353 11.04 18.24 11.04C17.4447 11.04 16.8 10.3953 16.8 9.6C16.8 5.88865 13.7914 2.88 10.08 2.88C9.28472 2.88 8.64001 2.23529 8.64001 1.44Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.36 22.56C15.36 23.3553 14.7153 24 13.92 24C8.61805 24 4.31999 19.7019 4.31999 14.4C4.31999 13.6047 4.9647 12.96 5.75999 12.96C6.55528 12.96 7.19999 13.6047 7.19999 14.4C7.19999 18.1114 10.2086 21.12 13.92 21.12C14.7153 21.12 15.36 21.7647 15.36 22.56Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.44 15.36C0.64471 15.36 -1.40906e-08 14.7153 -3.14722e-08 13.92C-1.4735e-07 8.61805 4.29807 4.31999 9.6 4.31998C10.3953 4.31998 11.04 4.96469 11.04 5.75998C11.04 6.55527 10.3953 7.19998 9.6 7.19998C5.88865 7.19998 2.88 10.2086 2.88 13.92C2.88 14.7153 2.23529 15.36 1.44 15.36Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.56 8.64001C23.3553 8.64001 24 9.28472 24 10.08C24 15.3819 19.7019 19.68 14.4 19.68C13.6047 19.68 12.96 19.0353 12.96 18.24C12.96 17.4447 13.6047 16.8 14.4 16.8C18.1114 16.8 21.12 13.7914 21.12 10.08C21.12 9.28472 21.7647 8.64001 22.56 8.64001Z" fill="#0DBD8B"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

res/img/feather-customised/chevron-down-thin.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

res/img/feather-customised/chevron-down.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9L12 15L18 9" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 217 B

res/img/feather-customised/chevron-right.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 270 B

res/img/feather-customised/chevron-up.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 268 B

res/img/feather-customised/clipboard.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.75 3.75H3.75V10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="7" y="7" width="7" height="7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

res/img/globe.svg
+1 -4
View File
@@ -1,6 +1,3 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon">
<path id="sea" fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM4.6693 2.43613C4.8306 2.64728 4.94732 2.80007 4.45289 2.80007C4.14732 2.80007 3.84175 2.74171 3.58076 2.69186C3.15847 2.61121 2.85289 2.55285 2.85289 2.80007C2.85289 3.00007 3.65289 3.40007 4.45289 3.80007C5.25289 4.20007 6.05289 4.60007 6.05289 4.80007C6.05289 5.20007 6.05289 7.60007 5.25289 7.20007C4.45289 6.80007 2.45289 5.20007 2.45289 4.80007C2.45289 4.65277 2.18168 4.39698 1.85897 4.09263C1.30535 3.57051 0.600192 2.90547 0.852893 2.40007C1.25289 1.60007 2.85289 6.51479e-05 5.25289 0.800065C4.98623 1.06673 4.45289 1.68007 4.45289 2.00007C4.45289 2.15285 4.56961 2.30564 4.6693 2.43613Z" fill="#2E2F32"/>
<path id="earth" d="M4.45294 2.80007C5.25294 2.80007 4.45294 2.40007 4.45294 2.00007C4.45294 1.68007 4.98627 1.06673 5.25294 0.800065C2.85294 6.51479e-05 1.25294 1.60007 0.852941 2.40007C0.452941 3.20007 2.45294 4.40007 2.45294 4.80007C2.45294 5.20007 4.45294 6.80007 5.25294 7.20007C6.05294 7.60007 6.05294 5.20007 6.05294 4.80007C6.05294 4.40007 2.85294 3.20007 2.85294 2.80007C2.85294 2.40007 3.65294 2.80007 4.45294 2.80007Z" />
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6.53332 5.3468L6.24528 6.23562C6.23346 6.27208 6.21342 6.30534 6.1867 6.33282L5.90913 6.61831L5.59095 6.94559L5.52111 7.01743C5.4003 7.14169 5.19279 7.10832 5.11702 6.95246L4.97216 6.65447C4.96052 6.63052 4.94513 6.60859 4.92657 6.58949L4.63641 6.29104L4.39185 6.0395C4.34478 5.99108 4.28013 5.96377 4.2126 5.96377H3.83831C3.74261 5.96377 3.6553 5.90914 3.61347 5.82307L3.38884 5.36098C3.37228 5.32692 3.36368 5.28955 3.36368 5.25168V4.47996C3.36368 4.38629 3.31132 4.30048 3.22802 4.25764L2.78114 4.02781C2.74577 4.00962 2.70657 4.00013 2.6668 4.00013H2.19658C2.12905 4.00013 2.0644 3.97282 2.01733 3.9244L1.53085 3.42402C1.48223 3.37402 1.45672 3.30599 1.46046 3.23635L1.49316 2.62739C1.4977 2.54285 1.51357 2.45929 1.54034 2.37897L1.65227 2.0432C1.87098 1.38707 2.38792 0.873558 3.0455 0.659224L3.05974 0.654815C3.66901 0.466234 4.32388 0.487134 4.91987 0.714181C4.94274 0.722892 4.96343 0.736497 4.98049 0.754043L5.42152 1.20768C5.51586 1.30471 5.51586 1.45919 5.42152 1.55622L4.70716 2.291C4.66179 2.33766 4.63641 2.40018 4.63641 2.46527V2.71165C4.63641 2.86997 4.49111 2.98843 4.33603 2.95652L3.34587 2.75283C3.1908 2.72093 3.0455 2.83938 3.0455 2.99771V3.09559C3.0455 3.23366 3.15743 3.34559 3.2955 3.34559H3.75004C3.88812 3.34559 4.00004 3.45752 4.00004 3.59559V3.75013C4.00004 3.8882 4.11197 4.00013 4.25004 4.00013H5.16715C5.23467 4.00013 5.29933 4.02745 5.3464 4.07586L5.56243 4.29807C5.58132 4.3175 5.60324 4.33373 5.62734 4.34612L6.19093 4.63596C6.21503 4.64836 6.23695 4.66459 6.25584 4.68402L6.47475 4.90918C6.52012 4.95584 6.5455 5.01836 6.5455 5.08345V5.26973C6.5455 5.2959 6.54139 5.3219 6.53332 5.3468Z" fill="#A9B2BC"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

res/img/icon-jump-to-bottom.svg
-32
View File
@@ -1,32 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1016 B

res/img/icon-jump-to-first-unread.svg
-16
View File
@@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
style="fill:none"
version="1.1"
viewBox="0 0 18.666187 8.7375818"
height="8.7375822"
width="18.666187">
<defs
id="defs8" />
<path
d="M 17.909095,7.981591 9.3330939,0.74997995 0.75709259,7.981591"
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path2-8-3" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 559 B

res/img/icon_copy_message.svg
-86
View File
@@ -1,86 +0,0 @@
<?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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="19px"
height="19px"
viewBox="0 0 19 19"
version="1.1"
id="svg3734"
sodipodi:docname="icon_copy_message.svg"
inkscape:version="0.92.1 r">
<metadata
id="metadata3738">
<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>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1596"
inkscape:window-height="846"
id="namedview3736"
showgrid="false"
inkscape:zoom="12.421053"
inkscape:cx="3.4935767"
inkscape:cy="2.469644"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Symbols" />
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title
id="title3722">ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
<desc
id="desc3724">Created with sketchtool.</desc>
<defs
id="defs3726" />
<g
id="Symbols"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd">
<path
d="M 9.5,19 C 14.746705,19 19,14.746705 19,9.5 19,4.2532949 14.746705,0 9.5,0 4.2532949,0 0,4.2532949 0,9.5 0,14.746705 4.2532949,19 9.5,19 Z"
id="Oval-69"
inkscape:connector-curvature="0"
style="fill:#ececec" />
<g
id="g4632"
transform="translate(-2.3841858e-7,-1)">
<rect
style="stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
y="4.3017478"
x="4.6289611"
height="10.396504"
width="7.7420783"
id="rect3745-3" />
<rect
style="fill:#ececec;fill-opacity:1;stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
y="6.3017478"
x="6.6289611"
height="10.396504"
width="7.7420783"
id="rect3745" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

res/img/riot-logo.svg
-6
View File
@@ -1,6 +0,0 @@
<svg width="42" height="50" viewBox="0 0 42 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.04021 42.174C1.04021 45.944 4.27657 49 8.26822 49C12.2603 49 15.4962 45.944 15.4962 42.174V35.2587L22.8119 35.2518C23.2234 35.2518 23.6386 35.2385 24.0415 35.2122C33.5209 34.6096 40.9465 27.1046 40.9465 18.1261C40.9465 8.68273 32.8114 1 22.8119 1H8.26822C4.27657 1 1.04021 4.05637 1.04021 7.82645V27.7141C1.01327 27.9548 0.999582 28.1987 1.00001 28.4459C1.00001 28.6887 1.01412 28.9286 1.04021 29.1645V42.174ZM15.4963 21.6066V14.6525H22.812C24.8405 14.6525 26.4901 16.2103 26.4901 18.1261C26.4901 19.9469 24.9881 21.4692 23.0665 21.5916C22.9822 21.5969 22.8975 21.5993 22.8047 21.5993L15.4963 21.6066Z" fill="#A2DDEF"/>
<path d="M15.4963 14.6525V14.0405H14.8844V14.6525H15.4963ZM15.4963 21.6066H14.8844V22.2191L15.4969 22.2185L15.4963 21.6066ZM22.8047 21.5993V20.9874H22.8041L22.8047 21.5993ZM23.0665 21.5916L23.1045 22.2024L23.1053 22.2023L23.0665 21.5916ZM1.04021 29.1645H1.65214V29.1308L1.64843 29.0972L1.04021 29.1645ZM1.00001 28.4459H1.61194L1.61193 28.4449L1.00001 28.4459ZM1.04021 27.7141L1.64834 27.7821L1.65214 27.7482V27.7141H1.04021ZM24.0415 35.2122L24.0027 34.6015L24.0017 34.6016L24.0415 35.2122ZM22.8119 35.2518V34.6399H22.8113L22.8119 35.2518ZM15.4962 35.2587L15.4957 34.6467L14.8843 34.6473V35.2587H15.4962ZM14.8844 14.6525V21.6066H16.1082V14.6525H14.8844ZM15.4969 22.2185L22.8053 22.2112L22.8041 20.9874L15.4957 20.9946L15.4969 22.2185ZM22.8047 22.2112C22.9085 22.2112 23.006 22.2085 23.1045 22.2024L23.0284 20.9809C22.9584 20.9852 22.8865 20.9874 22.8047 20.9874V22.2112ZM23.1053 22.2023C25.3203 22.0612 27.1021 20.2979 27.1021 18.1261H25.8782C25.8782 19.5959 24.6559 20.8772 23.0276 20.9809L23.1053 22.2023ZM27.1021 18.1261C27.1021 15.8399 25.145 14.0405 22.812 14.0405V15.2644C24.536 15.2644 25.8782 16.5808 25.8782 18.1261H27.1021ZM22.812 14.0405H15.4963V15.2644H22.812V14.0405ZM8.26822 48.3881C4.58104 48.3881 1.65214 45.5735 1.65214 42.174H0.428288C0.428288 46.3145 3.97209 49.6119 8.26822 49.6119V48.3881ZM1.65214 42.174V29.1645H0.428288V42.174H1.65214ZM1.64843 29.0972C1.62467 28.8824 1.61193 28.665 1.61193 28.4459H0.388085C0.388085 28.7124 0.403576 28.9748 0.431997 29.2318L1.64843 29.0972ZM1.61193 28.4449C1.61155 28.221 1.62394 28.0001 1.64834 27.7821L0.432085 27.646C0.402599 27.9094 0.387617 28.1765 0.388085 28.447L1.61193 28.4449ZM1.65214 27.7141V7.82645H0.428288V27.7141H1.65214ZM1.65214 7.82645C1.65214 4.42682 4.58109 1.61193 8.26822 1.61193V0.388075C3.97204 0.388075 0.428288 3.68592 0.428288 7.82645H1.65214ZM8.26822 1.61193H22.8119V0.388075H8.26822V1.61193ZM22.8119 1.61193C32.5069 1.61193 40.3346 9.05321 40.3346 18.1261H41.5584C41.5584 8.31226 33.1159 0.388075 22.8119 0.388075V1.61193ZM40.3346 18.1261C40.3346 26.7525 33.1898 34.0175 24.0027 34.6015L24.0804 35.8229C33.8521 35.2017 41.5584 27.4566 41.5584 18.1261H40.3346ZM24.0017 34.6016C23.6124 34.6269 23.2104 34.6399 22.8119 34.6399V35.8637C23.2363 35.8637 23.6649 35.85 24.0813 35.8228L24.0017 34.6016ZM22.8113 34.6399L15.4957 34.6467L15.4968 35.8706L22.8125 35.8637L22.8113 34.6399ZM14.8843 35.2587V42.174H16.1082V35.2587H14.8843ZM14.8843 42.174C14.8843 45.5736 11.9558 48.3881 8.26822 48.3881V49.6119C12.5648 49.6119 16.1082 46.3145 16.1082 42.174H14.8843Z" fill="#368BD6"/>
<path d="M8.26823 42.174V7.82642H22.8119C28.8351 7.82642 33.7181 12.4378 33.7181 18.1261C33.7181 23.5784 29.232 28.0412 23.5561 28.4019C23.3098 28.4176 23.0621 28.4257 22.8119 28.4257L8.22803 28.4395" stroke="#368BD6" stroke-width="1.22385" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4227 9.0113C15.758 7.21673 15.3325 5.4048 14.2243 3.91155C11.9366 0.828522 7.41753 0.0768486 4.15037 2.23574C2.56747 3.28105 1.51106 4.84579 1.17575 6.64116C0.84001 8.43653 1.26557 10.2481 2.37372 11.7413C4.66146 14.8243 9.18092 15.576 12.4481 13.4171C14.0306 12.3714 15.087 10.8071 15.4227 9.0113ZM27.852 46.0868C29.2587 47.9824 31.4998 48.9962 33.7777 48.9962C35.21 48.9962 36.6569 48.5951 37.9195 47.7594C41.1883 45.5965 41.9817 41.3397 39.6905 38.2522L29.4751 24.4846C27.1843 21.3972 22.6769 20.6475 19.408 22.8121C16.1392 24.975 15.3458 29.2318 17.6365 32.3192L27.852 46.0868Z" fill="#368BD6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

res/themes/dark/css/_dark.scss
+8 -5
View File
@@ -18,6 +18,10 @@ $primary-fg-color: $text-primary-color;
$primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color;
// additional text colors
$secondary-fg-color: #A9B2BC;
$tertiary-fg-color: #8E99A4;
// used for dialog box text
$light-fg-color: $header-panel-text-secondary-color;
@@ -42,7 +46,7 @@ $inverted-bg-color: $base-color;
$selected-color: $room-highlight-color;
// selected for hoverover & selected event tiles
$event-selected-color: $header-panel-bg-color;
$event-selected-color: #21262c;
// used for the hairline dividers in RoomView
$primary-hairline-color: transparent;
@@ -96,10 +100,9 @@ $roomheader-bg-color: $bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color;
$icon-button-color: #8E99A4;
$roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;
@@ -112,10 +115,10 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: #8E99A4;
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomtile-preview-color: #A9B2BC;
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);
res/themes/legacy-dark/css/_legacy-dark.scss
+2 -2
View File
@@ -15,6 +15,7 @@ $room-highlight-color: #343a46;
// typical text (dark-on-white in light skin)
$primary-fg-color: $text-primary-color;
$secondary-fg-color: $primary-fg-color;
$primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color;
@@ -95,10 +96,9 @@ $roomheader-color: $text-primary-color;
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
$roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color;
$icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;
res/themes/legacy-light/css/_legacy-light.scss
+4 -3
View File
@@ -23,6 +23,7 @@ $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin)
$primary-fg-color: #2e2f32;
$secondary-fg-color: $primary-fg-color;
$primary-bg-color: #ffffff;
$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
@@ -162,10 +163,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color;
$tagpanel-button-color: #91a1c0;
$roomheader-button-color: #91a1c0;
$groupheader-button-color: #91a1c0;
$rightpanel-button-color: #91a1c0;
$composer-button-color: #91a1c0;
$icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color;
@@ -228,7 +228,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/icon_copy_message.svg";
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
res/themes/legacy-light/css/_paths.scss
+1 -1
View File
@@ -1,3 +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`.
// This value is overridden by external themes in `element-web`.
$res: ../../..;
res/themes/light/css/_light.scss
+13 -11
View File
@@ -19,8 +19,8 @@ $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$primary-fg-color: #2e2f32;
$roomlist-header-color: $primary-fg-color;
$notice-secondary-color: $roomlist-header-color;
$secondary-fg-color: #737D8C;
$tertiary-fg-color: #8D99A5;
$header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin)
@@ -52,10 +52,6 @@ $info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
@@ -78,7 +74,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5);
$selected-color: $secondary-accent-color;
// selected for hoverover & selected event tiles
$event-selected-color: $header-panel-bg-color;
$event-selected-color: #f6f7f8;
// used for the hairline dividers in RoomView
$primary-hairline-color: transparent;
@@ -162,10 +158,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
$roomheader-addroom-fg-color: #5c6470;
$tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0;
$composer-button-color: #91A1C0;
$icon-button-color: #C1C6CD;
$roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color;
@@ -178,9 +173,10 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomtile-preview-color: #737D8C;
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #FFF;
@@ -199,8 +195,14 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent;
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// ********************
$widget-menu-bar-bg-color: $secondary-accent-color;
@@ -227,7 +229,7 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/icon_copy_message.svg";
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
res/themes/light/css/_paths.scss
+1 -1
View File
@@ -1,3 +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`.
// This value is overridden by external themes in `element-web`.
$res: ../../..;