sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #5013 from matrix-org/travis/room-list/rm-old

Browse Source 
[BREAKING] Remove the old room list
This commit is contained in:
Travis Ralston
2020-07-20 06:46:05 -06:00
committed by GitHub
parent 58532f2ac4 e03978a7ba
commit 7996013cd5
84 changed files with 864 additions and 6844 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/avatars/_DecoratedRoomAvatar.scss
+1 -1
View File
@@ -24,7 +24,7 @@ limitations under the License.
right: 0;
}
.mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
position: absolute;
top: 0;
right: 0;
res/css/views/rooms/_InviteOnlyIcon.scss
-58
View File
@@ -1,58 +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.
*/
@define-mixin mx_InviteOnlyIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
}
@define-mixin mx_InviteOnlyIcon_padlock {
background-color: $roomtile-name-color;
mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_InviteOnlyIcon_large {
@mixin mx_InviteOnlyIcon;
margin: 0 4px;
&::before {
@mixin mx_InviteOnlyIcon_padlock;
width: 12px;
height: 12px;
}
}
.mx_InviteOnlyIcon_small {
@mixin mx_InviteOnlyIcon;
left: -2px;
&::before {
@mixin mx_InviteOnlyIcon_padlock;
width: 10px;
height: 10px;
}
}
res/css/views/rooms/_JumpToBottomButton.scss
+4 -4
View File
@@ -41,8 +41,8 @@ limitations under the License.
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
color: $accent-fg-color;
background-color: $muted-fg-color;
}
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
@@ -56,7 +56,7 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@@ -70,5 +70,5 @@ limitations under the License.
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
background: $muted-fg-color;
}
res/css/views/rooms/_NotificationBadge.scss
+1 -1
View File
@@ -27,7 +27,7 @@ limitations under the License.
// ^- The count is an element floating within that.
&.mx_NotificationBadge_visible {
background-color: $roomtile2-default-badge-bg-color;
background-color: $roomtile-default-badge-bg-color;
// Create a flexbox to order the count a bit easier
display: flex;
res/css/views/rooms/_RoomBreadcrumbs.scss
+29 -85
View File
@@ -1,5 +1,5 @@
/*
Copyright 2019 New Vector Ltd
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.
@@ -15,98 +15,42 @@ limitations under the License.
*/
.mx_RoomBreadcrumbs {
position: relative;
height: 42px;
padding: 8px;
padding-bottom: 0;
width: 100%;
// Create a flexbox for the crumbs
display: flex;
flex-direction: row;
// repeating circles as empty placeholders
background:
radial-gradient(
circle at center,
$breadcrumb-placeholder-bg-color,
$breadcrumb-placeholder-bg-color 15px,
transparent 16px
);
background-size: 36px;
background-position: 6px -1px;
background-repeat: repeat-x;
// Autohide the scrollbar
overflow-x: hidden;
&:hover {
overflow-x: visible;
}
.mx_AutoHideScrollbar {
display: flex;
flex-direction: row;
height: 100%;
}
align-items: flex-start;
.mx_RoomBreadcrumbs_crumb {
margin-left: 4px;
height: 32px;
display: inline-block;
transition: transform 0.3s, width 0.3s;
position: relative;
.mx_RoomTile_badge {
position: absolute;
top: -3px;
right: -4px;
}
.mx_RoomBreadcrumbs_dmIndicator {
position: absolute;
bottom: 0;
right: -4px;
}
}
.mx_RoomBreadcrumbs_animate {
margin-left: 0;
margin-right: 8px;
width: 32px;
transform: scale(1);
}
.mx_RoomBreadcrumbs_preAnimate {
width: 0;
transform: scale(0);
// These classes come from the CSSTransition component. There's many more classes we
// could care about, but this is all we worried about for now. The animation works by
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs-enter-active {
margin-left: 0;
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs_left {
opacity: 0.5;
}
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
// will deal with left/right positioning for us. Normally we'd use position:sticky on
// a few key elements, however that doesn't work in horizontal scrolling scenarios.
.mx_IndicatorScrollbar_leftOverflowIndicator,
.mx_IndicatorScrollbar_rightOverflowIndicator {
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;
top: 0;
bottom: 0;
width: 15px;
display: block;
pointer-events: none;
z-index: 100;
.mx_RoomBreadcrumbs_placeholder {
font-weight: 600;
font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
height: 32px;
}
}
.mx_RoomBreadcrumbs_Tooltip {
margin-left: -42px;
margin-top: -42px;
}
res/css/views/rooms/_RoomBreadcrumbs2.scss
-58
View File
@@ -1,58 +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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
.mx_RoomBreadcrumbs2 {
width: 100%;
// Create a flexbox for the crumbs
display: flex;
flex-direction: row;
align-items: flex-start;
.mx_RoomBreadcrumbs2_crumb {
margin-right: 8px;
width: 32px;
}
// These classes come from the CSSTransition component. There's many more classes we
// could care about, but this is all we worried about for now. The animation works by
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs2-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs2-enter-active {
margin-left: 0;
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs2_placeholder {
font-weight: 600;
font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
height: 32px;
}
}
.mx_RoomBreadcrumbs2_Tooltip {
margin-left: -42px;
margin-top: -42px;
}
res/css/views/rooms/_RoomDropTarget.scss
-55
View File
@@ -1,55 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket 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_RoomDropTarget_container {
background-color: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.collapsed .mx_RoomDropTarget_container {
padding-right: 10px;
padding-left: 10px;
}
.mx_RoomDropTarget {
font-size: $font-13px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
}
.mx_RoomDropTarget_label {
position: relative;
margin-top: 3px;
line-height: $font-21px;
z-index: 1;
text-align: center;
}
.collapsed .mx_RoomDropTarget_avatar {
float: none;
}
.collapsed .mx_RoomDropTarget_label {
display: none;
}
res/css/views/rooms/_RoomList.scss
+7 -52
View File
@@ -1,6 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
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.
@@ -15,56 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomList.mx_RoomList2 {
overflow-y: auto;
}
.mx_RoomList {
/* take up remaining space below TopLeftMenu */
flex: 1;
min-height: 0;
overflow-y: hidden;
}
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
.mx_RoomList .mx_ResizeHandle {
// needed so the z-index takes effect
position: relative;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
}
.mx_RoomList_expandButton {
margin-left: 8px;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomList_emptySubListTip_container {
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.mx_RoomList_emptySubListTip {
font-size: $font-13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: $font-16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
vertical-align: -2px;
}
.mx_RoomList_headerButtons {
position: absolute;
right: 60px;
// Create a column-based flexbox for the sublists. That's pretty much all we have to
// worry about in this stylesheet.
display: flex;
flex-direction: column;
flex-wrap: nowrap; // let the column overflow
}
res/css/views/rooms/_RoomList2.scss
-27
View File
@@ -1,27 +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.
*/
// TODO: Rename to mx_RoomList during replacement of old component
.mx_RoomList2 {
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
// Create a column-based flexbox for the sublists. That's pretty much all we have to
// worry about in this stylesheet.
display: flex;
flex-direction: column;
flex-wrap: nowrap; // let the column overflow
}
res/css/views/rooms/_RoomSublist2.scss → res/css/views/rooms/_RoomSublist.scss
+57 -59
View File
@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
.mx_RoomSublist2 {
.mx_RoomSublist {
// The sublist is a column of rows, essentially
display: flex;
flex-direction: column;
@@ -27,7 +25,7 @@ limitations under the License.
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
.mx_RoomSublist2_headerContainer {
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
align-items: center;
@@ -43,13 +41,13 @@ limitations under the License.
// all works by ensuring the header text has a fixed height when sticky so the
// fixed height of the container can maintain the scroll position.
// The combined height must be set in the LeftPanel2 component for sticky headers
// The combined height must be set in the LeftPanel component for sticky headers
// to work correctly.
padding-bottom: 8px;
height: 24px;
color: $roomlist2-header-color;
color: $roomlist-header-color;
.mx_RoomSublist2_stickable {
.mx_RoomSublist_stickable {
flex: 1;
max-width: 100%;
@@ -61,26 +59,26 @@ limitations under the License.
// to identify when a header is sticky. If we didn't have a consistent sticky class,
// we'd have to do the "is sticky" checks again on click, as clicking the header
// when sticky scrolls instead of collapses the list.
&.mx_RoomSublist2_headerContainer_sticky {
&.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; // to match the header container
// width set by JS
width: calc(100% - 22px);
}
&.mx_RoomSublist2_headerContainer_stickyBottom {
&.mx_RoomSublist_headerContainer_stickyBottom {
bottom: 0;
}
// We don't have a top style because the top is dependent on the room list header's
// height, and is therefore calculated in JS.
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
}
// Sticky Headers End
// ***************************
.mx_RoomSublist2_badgeContainer {
.mx_RoomSublist_badgeContainer {
// Create another flexbox row because it's super easy to position the badge this way.
display: flex;
align-items: center;
@@ -93,14 +91,14 @@ limitations under the License.
}
}
&:not(.mx_RoomSublist2_headerContainer_withAux) {
&:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
}
}
.mx_RoomSublist2_auxButton,
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_auxButton,
.mx_RoomSublist_menuButton {
margin-left: 8px; // should be the same as the notification badge
position: relative;
width: 24px;
@@ -122,21 +120,21 @@ limitations under the License.
}
// Hide the menu button by default
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist2_auxButton::before {
.mx_RoomSublist_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
}
.mx_RoomSublist2_menuButton::before {
.mx_RoomSublist_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
.mx_RoomSublist2_headerText {
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
line-height: $font-16px;
@@ -148,7 +146,7 @@ limitations under the License.
overflow: hidden;
white-space: nowrap;
.mx_RoomSublist2_collapseBtn {
.mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 12px;
@@ -169,7 +167,7 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_RoomSublist2_collapseBtn_collapsed::before {
&.mx_RoomSublist_collapseBtn_collapsed::before {
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
}
}
@@ -181,12 +179,12 @@ limitations under the License.
// 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.
&:first-child .mx_RoomSublist2_headerContainer {
&:first-child .mx_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
}
.mx_RoomSublist2_resizeBox {
.mx_RoomSublist_resizeBox {
position: relative;
// Create another flexbox column for the tiles
@@ -194,7 +192,7 @@ limitations under the License.
flex-direction: column;
overflow: hidden;
.mx_RoomSublist2_tiles {
.mx_RoomSublist_tiles {
flex: 1 0 0;
overflow: hidden;
// need this to be flex otherwise the overflow hidden from above
@@ -206,18 +204,18 @@ limitations under the License.
mask-image: linear-gradient(0deg, transparent, black 4px);
}
.mx_RoomSublist2_resizerHandles_showNButton {
.mx_RoomSublist_resizerHandles_showNButton {
flex: 0 0 32px;
}
.mx_RoomSublist2_resizerHandles {
.mx_RoomSublist_resizerHandles {
flex: 0 0 4px;
}
// Class name comes from the ResizableBox component
// The hover state needs to use the whole sublist, not just the resizable box,
// so that selector is below and one level higher.
.mx_RoomSublist2_resizerHandle {
.mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@@ -235,21 +233,21 @@ limitations under the License.
right: calc(50% - 32px) !important;
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.mx_RoomSublist2_resizerHandle {
&:hover, &.mx_RoomSublist_hasMenuOpen {
.mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}
.mx_RoomSublist2_showNButton {
.mx_RoomSublist_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
color: $roomtile-preview-color;
// Update the render() function for RoomSublist2 if these change
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
height: 24px;
padding-bottom: 4px;
@@ -258,7 +256,7 @@ limitations under the License.
display: flex;
align-items: center;
.mx_RoomSublist2_showNButtonChevron {
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 16px;
height: 16px;
@@ -267,52 +265,52 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomtile2-preview-color;
background: $roomtile-preview-color;
}
.mx_RoomSublist2_showMoreButtonChevron {
.mx_RoomSublist_showMoreButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist2_showLessButtonChevron {
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
}
&.mx_RoomSublist2_hasMenuOpen,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
&.mx_RoomSublist_hasMenuOpen,
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
.mx_RoomSublist_menuButton {
visibility: visible;
width: 24px;
margin-left: 8px;
}
}
&.mx_RoomSublist2_minimized {
.mx_RoomSublist2_headerContainer {
&.mx_RoomSublist_minimized {
.mx_RoomSublist_headerContainer {
height: auto;
flex-direction: column;
position: relative;
.mx_RoomSublist2_badgeContainer {
.mx_RoomSublist_badgeContainer {
order: 0;
align-self: flex-end;
margin-right: 0;
}
.mx_RoomSublist2_stickable {
.mx_RoomSublist_stickable {
order: 1;
max-width: 100%;
}
.mx_RoomSublist2_auxButton {
.mx_RoomSublist_auxButton {
order: 2;
visibility: visible;
width: 32px !important; // !important to override hover styles
height: 32px !important; // !important to override hover styles
margin-left: 0 !important; // !important to override hover styles
background-color: $roomlist2-button-bg-color;
background-color: $roomlist-button-bg-color;
margin-top: 8px;
&::before {
@@ -322,25 +320,25 @@ limitations under the License.
}
}
.mx_RoomSublist2_resizeBox {
.mx_RoomSublist_resizeBox {
align-items: center;
}
.mx_RoomSublist2_showNButton {
.mx_RoomSublist_showNButton {
flex-direction: column;
.mx_RoomSublist2_showNButtonChevron {
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px; // to center
}
}
.mx_RoomSublist2_menuButton {
.mx_RoomSublist_menuButton {
height: 16px;
}
&.mx_RoomSublist2_hasMenuOpen,
& > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
&.mx_RoomSublist_hasMenuOpen,
& > .mx_RoomSublist_headerContainer:hover {
.mx_RoomSublist_menuButton {
visibility: visible;
position: absolute;
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
@@ -352,7 +350,7 @@ limitations under the License.
// This is the same color as the left panel background because it needs
// to occlude the sublist title
background-color: $roomlist2-bg-color;
background-color: $roomlist-bg-color;
&::before {
top: 0;
@@ -360,8 +358,8 @@ limitations under the License.
}
}
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
.mx_RoomSublist2_menuButton {
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_RoomSublist_menuButton {
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
}
}
@@ -369,7 +367,7 @@ limitations under the License.
}
}
.mx_RoomSublist2_contextMenu {
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
@@ -377,11 +375,11 @@ limitations under the License.
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; // additional 16px
border: 1px solid $roomsublist2-divider-color;
border: 1px solid $roomsublist-divider-color;
opacity: 0.1;
}
.mx_RoomSublist2_contextMenu_title {
.mx_RoomSublist_contextMenu_title {
font-size: $font-15px;
line-height: $font-20px;
font-weight: 600;
@@ -393,6 +391,6 @@ limitations under the License.
}
}
.mx_RoomSublist2_addRoomTooltip {
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
res/css/views/rooms/_RoomTile.scss
+201 -190
View File
@@ -1,6 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
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.
@@ -15,214 +14,226 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
.mx_UserOnlineDot {
display: block;
margin-right: 5px;
}
}
.mx_RoomTile:focus {
filter: none !important;
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
top: -54px;
left: -12px;
}
.mx_RoomTile_nameContainer {
display: flex;
align-items: center;
flex: 1;
vertical-align: middle;
min-width: 0;
}
.mx_RoomTile_labelContainer {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.mx_RoomTile_subtext {
display: inline-block;
font-size: $font-11px;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
position: relative;
bottom: 4px;
}
.mx_RoomTile_avatar_container {
position: relative;
display: flex;
}
.mx_RoomTile_avatar {
flex: 0;
margin-bottom: 4px;
padding: 4px;
width: 24px;
vertical-align: middle;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
padding-top: 0;
vertical-align: super;
}
// The tile is also a flexbox row itself
display: flex;
.mx_RoomTile_dm {
display: block;
position: absolute;
bottom: 0;
right: -5px;
z-index: 2;
}
&.mx_RoomTile_selected,
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
background-color: $roomtile-selected-bg-color;
border-radius: 8px;
}
// Note we match .mx_E2EIcon to make sure this matches more tightly than just
// .mx_E2EIcon on its own
.mx_RoomTile_e2eIcon.mx_E2EIcon {
height: 14px;
width: 14px;
display: block;
position: absolute;
bottom: -2px;
right: -5px;
z-index: 1;
margin: 0;
}
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 8px;
}
.mx_RoomTile_name {
font-size: $font-14px;
padding: 0 4px;
color: $roomtile-name-color;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_nameContainer {
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
.mx_RoomTile_badge {
flex: 0 1 content;
border-radius: 0.8em;
padding: 0 0.4em;
color: $roomtile-badge-fg-color;
font-weight: 600;
font-size: $font-12px;
}
.collapsed {
.mx_RoomTile {
margin: 0 6px;
padding: 0 2px;
position: relative;
// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_name,
.mx_RoomTile_messagePreview {
margin: 0 2px;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_RoomTile_name {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
}
.mx_RoomTile_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile_name {
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_RoomTile_badge {
position: absolute;
right: 6px;
top: 0px;
border-radius: 16px;
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.mx_RoomTile_menuButton {
display: none; // no design for this for now
}
.mx_UserOnlineDot {
display: none; // no design for this for now
}
}
// toggle menuButton and badge on menu displayed
.mx_RoomTile_menuDisplayed,
// or on keyboard focus of room tile
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
// or on pointer hover
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
.mx_RoomTile_menuButton {
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_UserOnlineDot {
display: none;
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile_minimized) {
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile_badgeContainer {
width: 0;
height: 0;
display: none;
}
.mx_RoomTile_notificationsButton,
.mx_RoomTile_menuButton {
display: block;
}
}
}
&.mx_RoomTile_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
}
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
background-color: $roomtile-name-color;
// We use these both in context menus and the room tiles
.mx_RoomTile_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomTile_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomTile_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.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_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed {
color: $accent-fg-color;
background-color: $warning-color;
}
.mx_RoomTile_contextMenu {
.mx_RoomTile_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
.mx_RoomTile_name {
font-weight: 600;
color: $roomtile-selected-color;
.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');
}
.mx_RoomTile_iconFavorite::before {
mask-image: url('$(res)/img/feather-customised/favourites.svg');
}
.mx_RoomTile_iconArrowDown::before {
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
}
.mx_RoomTile_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
}
.mx_DNDRoomTile {
transform: none;
transition: transform 0.2s;
}
.mx_DNDRoomTile_dragging {
transform: scale(1.05, 1.05);
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;
}
.mx_RoomTile.mx_RoomTile_transparent {
background-color: transparent;
}
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
}
.mx_GroupInviteTile .mx_RoomTile_name {
flex: 1;
}
res/css/views/rooms/_RoomTile2.scss
-241
View File
@@ -1,241 +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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
// Note: the room tile expects to be in a flexbox column container
.mx_RoomTile2 {
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex;
&.mx_RoomTile2_selected,
&:hover,
&:focus-within,
&.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color;
border-radius: 8px;
}
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
margin-right: 8px;
}
.mx_RoomTile2_nameContainer {
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile2_name,
.mx_RoomTile2_messagePreview {
margin: 0 2px;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_RoomTile2_name {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile2_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile2-preview-color;
}
.mx_RoomTile2_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile2_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile2_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
display: block;
}
.mx_RoomTile2_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile2_minimized) {
&:hover,
&:focus-within,
&.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
display: none;
}
.mx_RoomTile2_notificationsButton,
.mx_RoomTile2_menuButton {
display: block;
}
}
}
&.mx_RoomTile2_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
margin-right: 0;
}
}
}
// We use these both in context menus and the room tiles
.mx_RoomTile2_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomTile2_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomTile2_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.mx_RoomTile2_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomTile2_iconCheck::before {
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
.mx_RoomTile2_contextMenu {
.mx_RoomTile2_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_RoomTile2_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_RoomTile2_iconStar::before {
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
}
.mx_RoomTile2_iconFavorite::before {
mask-image: url('$(res)/img/feather-customised/favourites.svg');
}
.mx_RoomTile2_iconArrowDown::before {
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
}
.mx_RoomTile2_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile2_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}
res/css/views/rooms/_RoomTileIcon.scss
+1 -1
View File
@@ -18,7 +18,7 @@ limitations under the License.
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $roomlist2-bg-color; // to match the room list itself
background-color: $roomlist-bg-color; // to match the room list itself
}
.mx_RoomTileIcon_globe::before {
res/css/views/rooms/_TopUnreadMessagesBar.scss
+4 -4
View File
@@ -42,7 +42,7 @@ limitations under the License.
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@@ -54,7 +54,7 @@ limitations under the License.
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
background: $muted-fg-color;
}
.mx_TopUnreadMessagesBar_markAsRead {
@@ -62,7 +62,7 @@ limitations under the License.
width: 18px;
height: 18px;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
border: 1.3px solid $muted-fg-color;
border-radius: 10px;
margin: 5px auto;
}
@@ -76,5 +76,5 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
background: $roomtile-name-color;
background: $muted-fg-color;
}
res/css/views/rooms/_UserOnlineDot.scss
-23
View File
@@ -1,23 +0,0 @@
/*
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_UserOnlineDot {
border-radius: 50%;
background-color: $accent-color;
height: 6px;
width: 6px;
display: inline-block;
}
res/css/views/voip/_CallContainer.scss
+4 -4
View File
@@ -36,12 +36,12 @@ limitations under the License.
}
}
.mx_IncomingCallBox2 {
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
padding: 8px;
.mx_IncomingCallBox2_CallerInfo {
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
@@ -68,12 +68,12 @@ limitations under the License.
}
}
.mx_IncomingCallBox2_buttons {
.mx_IncomingCallBox_buttons {
padding: 8px;
display: flex;
flex-direction: row;
> .mx_IncomingCallBox2_spacer {
> .mx_IncomingCallBox_spacer {
width: 8px;
}
res/css/views/voip/_CallView.scss
+71 -2
View File
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
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.
@@ -18,8 +19,76 @@ limitations under the License.
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
text-align: center;
padding: 6px;
font-weight: bold;
font-size: $font-13px;
border-radius: 8px;
min-width: 200px;
display: flex;
align-items: center;
img {
margin: 4px;
margin-right: 10px;
}
> div {
display: flex;
flex-direction: column;
// Hacky vertical align
padding-top: 3px;
}
> div > p,
> div > h1 {
padding: 0;
margin: 0;
font-size: $font-13px;
line-height: $font-15px;
}
> div > p {
font-weight: bold;
}
> * {
flex-grow: 0;
flex-shrink: 0;
}
}
.mx_CallView_hangup {
position: absolute;
right: 8px;
bottom: 10px;
height: 35px;
width: 35px;
border-radius: 35px;
background-color: $notice-primary-color;
z-index: 101;
cursor: pointer;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
}
}
res/css/views/voip/_CallView2.scss
-96
View File
@@ -1,96 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
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.
*/
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
.mx_CallView2_voice {
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
padding: 6px;
font-weight: bold;
border-radius: 8px;
min-width: 200px;
display: flex;
align-items: center;
img {
margin: 4px;
margin-right: 10px;
}
> div {
display: flex;
flex-direction: column;
// Hacky vertical align
padding-top: 3px;
}
> div > p,
> div > h1 {
padding: 0;
margin: 0;
font-size: $font-13px;
line-height: $font-15px;
}
> div > p {
font-weight: bold;
}
> * {
flex-grow: 0;
flex-shrink: 0;
}
}
.mx_CallView2_hangup {
position: absolute;
right: 8px;
bottom: 10px;
height: 35px;
width: 35px;
border-radius: 35px;
background-color: $notice-primary-color;
z-index: 101;
cursor: pointer;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
}
}
res/css/views/voip/_IncomingCallbox.scss
-69
View File
@@ -1,69 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket 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_IncomingCallBox {
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: $primary-bg-color;
position: fixed;
z-index: 1000;
padding: 6px;
margin-top: -3px;
margin-left: -20px;
width: 200px;
}
.mx_IncomingCallBox_chevron {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_IncomingCallBox_title {
padding: 6px;
font-weight: bold;
}
.mx_IncomingCallBox_buttons {
display: flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
flex: 1;
}
.mx_IncomingCallBox_buttons_decline,
.mx_IncomingCallBox_buttons_accept {
vertical-align: middle;
width: 80px;
height: 36px;
line-height: $font-36px;
border-radius: 36px;
color: $accent-fg-color;
margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
background-color: $voip-decline-color;
}
.mx_IncomingCallBox_buttons_accept {
background-color: $voip-accept-color;
}