mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'develop' into gsouquet/threaded-messaging-2349

Browse source
This commit is contained in:
Germain Souquet 2021-08-25 08:53:16 +01:00
commit 77a463e679
170 changed files with 2911 additions and 1951 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -64,7 +64,6 @@
"cheerio": "^1.0.0-rc.9", "cheerio": "^1.0.0-rc.9",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"commonmark": "^0.29.3", "commonmark": "^0.29.3",
"context-filter-polyfill": "^0.2.4",
"counterpart": "^0.18.6", "counterpart": "^0.18.6",
"diff-dom": "^4.2.2", "diff-dom": "^4.2.2",
"diff-match-patch": "^1.0.5", "diff-match-patch": "^1.0.5",
@ -196,7 +195,6 @@
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js", "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js", "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js", "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js", "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
"RecorderWorklet": "<rootDir>/__mocks__/empty.js" "RecorderWorklet": "<rootDir>/__mocks__/empty.js"
}, },

29
res/css/_common.scss
View file

@ -53,8 +53,8 @@ html {
body { body {
font-family: $font-family; font-family: $font-family;
font-size: $font-15px; font-size: $font-15px;
background-color: $primary-bg-color; background-color: $background;
color: $primary-fg-color; color: $primary-content;
border: 0px; border: 0px;
margin: 0px; margin: 0px;
@ -89,7 +89,7 @@ b {
} }
h2 { h2 {
color: $primary-fg-color; color: $primary-content;
font-weight: 400; font-weight: 400;
font-size: $font-18px; font-size: $font-18px;
margin-top: 16px; margin-top: 16px;
@ -142,12 +142,12 @@ textarea::placeholder {
input[type=text], input[type=password], textarea { input[type=text], input[type=password], textarea {
background-color: transparent; background-color: transparent;
color: $primary-fg-color; color: $primary-content;
} }
/* Required by Firefox */ /* Required by Firefox */
textarea { textarea {
color: $primary-fg-color; color: $primary-content;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus {
@ -173,7 +173,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_textinput > input[type=search] { .mx_textinput > input[type=search] {
border: none; border: none;
flex: 1; flex: 1;
color: $primary-fg-color; color: $primary-content;
} }
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent; background-color: transparent;
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba($primary-fg-color, .1); border: 1px solid rgba($primary-content, .1);
// these things should probably not be defined globally // these things should probably not be defined globally
margin: 9px; margin: 9px;
} }
@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput { .mx_textinput {
color: $input-darker-fg-color; color: $input-darker-fg-color;
background-color: $primary-bg-color; background-color: $background;
border: none; border: none;
} }
} }
@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog { .mx_Dialog {
background-color: $primary-bg-color; background-color: $background;
color: $light-fg-color; color: $light-fg-color;
z-index: 4012; z-index: 4012;
font-weight: 300; font-weight: 300;
@ -379,8 +379,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content { .mx_Dialog_content {
margin: 24px 0 68px; margin: 24px 0 68px;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
word-wrap: break-word; word-wrap: break-word;
a {
color: $accent-color;
cursor: pointer;
}
} }
.mx_Dialog_buttons { .mx_Dialog_buttons {
@ -488,8 +493,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_textButton { .mx_textButton {

2
res/css/_components.scss
View file

@ -28,8 +28,8 @@
@import "./structures/_RoomView.scss"; @import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss"; @import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss"; @import "./structures/_SearchBox.scss";
@import "./structures/_SpaceHierarchy.scss";
@import "./structures/_SpacePanel.scss"; @import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss"; @import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss"; @import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss"; @import "./structures/_ToastContainer.scss";

22
res/css/structures/_BackdropPanel.scss
View file

@ -21,19 +21,12 @@ limitations under the License.
height: 100vh; height: 100vh;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
filter: blur(var(--lp-background-blur));
&::before { // Force a new layer for the backdropPanel so it's better hardware supported
content: " "; transform: translateZ(0);
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background-color: var(--lp-background-overlay);
}
} }
.mx_BackdropPanel--canvas { .mx_BackdropPanel--image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -41,11 +34,4 @@ limitations under the License.
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
&:nth-of-type(2n-1) {
opacity: 0.2;
}
&:nth-of-type(2n) {
opacity: 0.1;
}
} }

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

@ -34,7 +34,7 @@ limitations under the License.
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-content;
position: absolute; position: absolute;
font-size: $font-14px; font-size: $font-14px;
z-index: 5001; z-index: 5001;

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

@ -18,7 +18,7 @@ limitations under the License.
width: 960px; width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
color: $primary-fg-color; color: $primary-content;
} }
.mx_CreateRoom input, .mx_CreateRoom input,

22
res/css/structures/_GroupFilterPanel.scss
View file

@ -14,13 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_MatrixChat--with-avatar { $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_GroupFilterPanel {
background-color: transparent; .mx_GroupFilterPanelContainer {
} flex-grow: 0;
flex-shrink: 0;
width: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
} }
.mx_GroupFilterPanel { .mx_GroupFilterPanel {
z-index: 1;
background-color: $groupFilterPanel-bg-color; background-color: $groupFilterPanel-bg-color;
flex: 1; flex: 1;
cursor: pointer; cursor: pointer;
@ -82,13 +92,13 @@ limitations under the License.
} }
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype { .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: $primary-bg-color; background-color: $background;
border-radius: 6px; border-radius: 6px;
} }
.mx_TagTile_selected_prototype { .mx_TagTile_selected_prototype {
.mx_TagTile_homeIcon::before { .mx_TagTile_homeIcon::before {
background-color: $primary-fg-color; // dark-on-light background-color: $primary-content; // dark-on-light
} }
} }

6
res/css/structures/_GroupView.scss
View file

@ -132,7 +132,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 31px; height: 31px;
overflow: hidden; overflow: hidden;
color: $primary-fg-color; color: $primary-content;
font-weight: bold; font-weight: bold;
font-size: $font-22px; font-size: $font-22px;
padding-left: 19px; padding-left: 19px;
@ -397,7 +397,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
@ -422,7 +422,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: 8px; mask-size: 8px;
mask-image: url('$(res)/img/image-view/close.svg'); mask-image: url('$(res)/img/image-view/close.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
} }

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

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
$roomListCollapsedWidth: 68px; $roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar { .mx_MatrixChat--with-avatar {
@ -27,30 +26,35 @@ $roomListCollapsedWidth: 68px;
.mx_LeftPanel_wrapper { .mx_LeftPanel_wrapper {
display: flex; display: flex;
max-width: 50%; max-width: 50%;
position: relative;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
contain: layout paint;
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;
&[data-collapsed] {
max-width: $roomListCollapsedWidth;
}
}
} }
.mx_LeftPanel { .mx_LeftPanel {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
min-width: 206px;
// Create a row-based flexbox for the GroupFilterPanel and the room list // Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex; display: flex;
contain: content; contain: content;
position: relative; position: relative;
flex-grow: 1;
.mx_LeftPanel_GroupFilterPanelContainer { overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
flex-basis: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
}
// Note: The 'room list' in this context is actually everything that isn't the tag // Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc // panel, such as the menu options, breadcrumbs, filtering, etc
@ -142,7 +146,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
} }
} }
@ -165,7 +169,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
} }
&.mx_LeftPanel_exploreButton_space::before { &.mx_LeftPanel_exploreButton_space::before {
@ -183,6 +187,8 @@ $roomListCollapsedWidth: 68px;
} }
.mx_LeftPanel_roomListWrapper { .mx_LeftPanel_roomListWrapper {
// Make the y-scrollbar more responsive
padding-right: 2px;
overflow: hidden; overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter margin-top: 10px; // so we're not up against the search/filter
flex: 1 0 0; // needed in Safari to properly set flex-basis flex: 1 0 0; // needed in Safari to properly set flex-basis
@ -204,6 +210,7 @@ $roomListCollapsedWidth: 68px;
// These styles override the defaults for the minimized (66px) layout // These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel_minimized { &.mx_LeftPanel_minimized {
flex-grow: 0;
min-width: unset; min-width: unset;
width: unset !important; width: unset !important;

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

@ -113,7 +113,7 @@ limitations under the License.
&:hover .mx_LeftPanelWidget_resizerHandle { &:hover .mx_LeftPanelWidget_resizerHandle {
opacity: 0.8; opacity: 0.8;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_LeftPanelWidget_maximizeButton { .mx_LeftPanelWidget_maximizeButton {

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

@ -38,7 +38,7 @@ limitations under the License.
width: 4px !important; width: 4px !important;
border-radius: 4px !important; border-radius: 4px !important;
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

4
res/css/structures/_MatrixChat.scss
View file

@ -64,7 +64,7 @@ limitations under the License.
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) { .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
background-color: $primary-bg-color; background-color: $background;
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
@ -91,7 +91,7 @@ limitations under the License.
content: ' '; content: ' ';
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

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

@ -49,7 +49,7 @@ limitations under the License.
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
height: 1px; height: 1px;
opacity: 0.4; opacity: 0.4;
content: ''; content: '';
@ -70,7 +70,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile_roomName a { .mx_NotificationPanel .mx_EventTile_roomName a {
color: $primary-fg-color; color: $primary-content;
} }
.mx_NotificationPanel .mx_EventTile_avatar { .mx_NotificationPanel .mx_EventTile_avatar {
@ -79,7 +79,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-fg-color; color: $primary-content;
font-size: $font-12px; font-size: $font-12px;
display: inline; display: inline;
} }
@ -118,7 +118,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color; background-color: $background;
} }
.mx_NotificationPanel .mx_EventTile_content { .mx_NotificationPanel .mx_EventTile_content {

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

@ -43,7 +43,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup { .mx_RightPanel_headerButtonGroup {
height: 100%; height: 100%;
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $background;
padding: 0 9px; padding: 0 9px;
align-items: center; align-items: center;
} }

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

@ -28,7 +28,7 @@ limitations under the License.
.mx_RoomDirectory { .mx_RoomDirectory {
margin-bottom: 12px; margin-bottom: 12px;
color: $primary-fg-color; color: $primary-content;
word-break: break-word; word-break: break-word;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -71,14 +71,14 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
color: $primary-fg-color; color: $primary-content;
} }
> p { > p {
margin: 40px auto 60px; margin: 40px auto 60px;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-20px; line-height: $font-20px;
color: $secondary-fg-color; color: $secondary-content;
max-width: 464px; // easier reading max-width: 464px; // easier reading
} }
@ -97,7 +97,7 @@ limitations under the License.
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
color: $primary-fg-color; color: $primary-content;
display: grid; display: grid;
font-size: $font-12px; font-size: $font-12px;
grid-template-columns: max-content auto max-content max-content max-content; grid-template-columns: max-content auto max-content max-content max-content;

12
res/css/structures/_RoomSearch.scss
View file

@ -33,14 +33,14 @@ limitations under the License.
height: 16px; height: 16px;
mask: url('$(res)/img/element-icons/roomlist/search.svg'); mask: url('$(res)/img/element-icons/roomlist/search.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $secondary-fg-color; background-color: $secondary-content;
margin-left: 7px; margin-left: 7px;
} }
.mx_RoomSearch_input { .mx_RoomSearch_input {
border: none !important; // !important to override default app-wide styles border: none !important; // !important to override default app-wide styles
flex: 1 !important; // !important to override default app-wide styles flex: 1 !important; // !important to override default app-wide styles
color: $primary-fg-color !important; // !important to override default app-wide styles color: $primary-content !important; // !important to override default app-wide styles
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -48,12 +48,12 @@ limitations under the License.
line-height: $font-16px; line-height: $font-16px;
&:not(.mx_RoomSearch_inputExpanded)::placeholder { &:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: $tertiary-fg-color !important; // !important to override default app-wide styles color: $tertiary-content !important; // !important to override default app-wide styles
} }
} }
&.mx_RoomSearch_hasQuery { &.mx_RoomSearch_hasQuery {
border-color: $secondary-fg-color; border-color: $secondary-content;
} }
&.mx_RoomSearch_focused { &.mx_RoomSearch_focused {
@ -62,7 +62,7 @@ limitations under the License.
} }
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery { &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
background-color: $roomlist-filter-active-bg-color; background-color: $background;
.mx_RoomSearch_clearButton { .mx_RoomSearch_clearButton {
width: 16px; width: 16px;
@ -71,7 +71,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $secondary-fg-color; background-color: $secondary-content;
margin-right: 8px; margin-right: 8px;
} }
} }

10
res/css/structures/_RoomStatusBar.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image { .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px; margin-right: -12px;
border: 1px solid $primary-bg-color; border: 1px solid $background;
} }
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial { .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
@ -39,7 +39,7 @@ limitations under the License.
display: inline-block; display: inline-block;
color: #acacac; color: #acacac;
background-color: #ddd; background-color: #ddd;
border: 1px solid $primary-bg-color; border: 1px solid $background;
border-radius: 40px; border-radius: 40px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -171,14 +171,14 @@ limitations under the License.
} }
.mx_RoomStatusBar_connectionLostBar_desc { .mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color; color: $primary-content;
font-size: $font-13px; font-size: $font-13px;
opacity: 0.5; opacity: 0.5;
padding-bottom: 20px; padding-bottom: 20px;
} }
.mx_RoomStatusBar_resend_link { .mx_RoomStatusBar_resend_link {
color: $primary-fg-color !important; color: $primary-content !important;
text-decoration: underline !important; text-decoration: underline !important;
cursor: pointer; cursor: pointer;
} }
@ -187,7 +187,7 @@ limitations under the License.
height: 50px; height: 50px;
line-height: $font-50px; line-height: $font-50px;
color: $primary-fg-color; color: $primary-content;
opacity: 0.5; opacity: 0.5;
overflow-y: hidden; overflow-y: hidden;
display: block; display: block;

11
res/css/structures/_RoomView.scss
View file

@ -20,6 +20,8 @@ limitations under the License.
flex: 1; flex: 1;
position: relative; position: relative;
justify-content: center; justify-content: center;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
contain: strict;
} }
.mx_RoomView { .mx_RoomView {
@ -50,7 +52,7 @@ limitations under the License.
pointer-events: none; pointer-events: none;
background-color: $primary-bg-color; background-color: $background;
opacity: 0.95; opacity: 0.95;
position: absolute; position: absolute;
@ -97,7 +99,7 @@ limitations under the License.
left: 0; left: 0;
right: 0; right: 0;
z-index: 3000; z-index: 3000;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_RoomView_auxPanel_hiddenHighlights { .mx_RoomView_auxPanel_hiddenHighlights {
@ -163,7 +165,6 @@ limitations under the License.
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content;
} }
.mx_RoomView_statusArea { .mx_RoomView_statusArea {
@ -171,7 +172,7 @@ limitations under the License.
flex: 0 0 auto; flex: 0 0 auto;
max-height: 0px; max-height: 0px;
background-color: $primary-bg-color; background-color: $background;
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
@ -256,7 +257,7 @@ hr.mx_RoomView_myReadMarker {
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: $primary-bg-color; background-color: $background;
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {

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

@ -15,6 +15,7 @@ limitations under the License.
*/ */
.mx_ScrollPanel { .mx_ScrollPanel {
contain: strict;
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
position: relative; position: relative;

86
res/css/structures/_SpaceRoomDirectory.scss → res/css/structures/_SpaceHierarchy.scss
View file

@ -14,21 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
.mx_SpaceRoomDirectory {
height: 100%;
margin-bottom: 12px;
color: $primary-fg-color;
word-break: break-word;
display: flex;
flex-direction: column;
}
.mx_SpaceRoomDirectory,
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_landing {
.mx_Dialog_title { .mx_Dialog_title {
display: flex; display: flex;
@ -52,7 +37,7 @@ limitations under the License.
> div { > div {
font-weight: 400; font-weight: 400;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
} }
@ -68,23 +53,29 @@ limitations under the License.
margin: 24px 0 16px; margin: 24px 0 16px;
} }
.mx_SpaceRoomDirectory_noResults { .mx_SpaceHierarchy_noResults {
text-align: center; text-align: center;
> div { > div {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
.mx_SpaceRoomDirectory_listHeader { .mx_SpaceHierarchy_listHeader {
display: flex; display: flex;
min-height: 32px; min-height: 32px;
align-items: center; align-items: center;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-bottom: 12px;
> h4 {
font-weight: $font-semi-bold;
margin: 0;
}
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 4px 12px; padding: 4px 12px;
@ -105,7 +96,7 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_error { .mx_SpaceHierarchy_error {
position: relative; position: relative;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $notice-primary-color; color: $notice-primary-color;
@ -124,43 +115,44 @@ limitations under the License.
background-image: url("$(res)/img/element-icons/warning-badge.svg"); background-image: url("$(res)/img/element-icons/warning-badge.svg");
} }
} }
}
.mx_SpaceRoomDirectory_list { .mx_SpaceHierarchy_list {
margin-top: 16px; list-style: none;
padding-bottom: 40px; padding: 0;
margin: 0;
}
.mx_SpaceRoomDirectory_roomCount { .mx_SpaceHierarchy_roomCount {
> h3 { > h3 {
display: inline; display: inline;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-fg-color; color: $primary-content;
} }
> span { > span {
margin-left: 8px; margin-left: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
.mx_SpaceRoomDirectory_subspace { .mx_SpaceHierarchy_subspace {
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
} }
.mx_SpaceRoomDirectory_subspace_toggle { .mx_SpaceHierarchy_subspace_toggle {
position: absolute; position: absolute;
left: -1px; left: -1px;
top: 10px; top: 10px;
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 4px; border-radius: 4px;
background-color: $primary-bg-color; background-color: $background;
&::before { &::before {
content: ''; content: '';
@ -171,23 +163,23 @@ limitations under the License.
width: 16px; width: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-size: 16px; mask-size: 16px;
transform: rotate(270deg); transform: rotate(270deg);
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before { &.mx_SpaceHierarchy_subspace_toggle_shown::before {
transform: rotate(0deg); transform: rotate(0deg);
} }
} }
.mx_SpaceRoomDirectory_subspace_children { .mx_SpaceHierarchy_subspace_children {
position: relative; position: relative;
padding-left: 12px; padding-left: 12px;
} }
.mx_SpaceRoomDirectory_roomTile { .mx_SpaceHierarchy_roomTile {
position: relative; position: relative;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
@ -204,7 +196,7 @@ limitations under the License.
grid-column: 1; grid-column: 1;
} }
.mx_SpaceRoomDirectory_roomTile_name { .mx_SpaceHierarchy_roomTile_name {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
@ -214,7 +206,7 @@ limitations under the License.
.mx_InfoTooltip { .mx_InfoTooltip {
display: inline; display: inline;
margin-left: 12px; margin-left: 12px;
color: $tertiary-fg-color; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
@ -232,10 +224,10 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_roomTile_info { .mx_SpaceHierarchy_roomTile_info {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-18px; line-height: $font-18px;
color: $secondary-fg-color; color: $secondary-content;
grid-row: 2; grid-row: 2;
grid-column: 1/3; grid-column: 1/3;
display: -webkit-box; display: -webkit-box;
@ -244,7 +236,7 @@ limitations under the License.
overflow: hidden; overflow: hidden;
} }
.mx_SpaceRoomDirectory_actions { .mx_SpaceHierarchy_actions {
text-align: right; text-align: right;
margin-left: 20px; margin-left: 20px;
grid-column: 3; grid-column: 3;
@ -278,12 +270,12 @@ limitations under the License.
} }
} }
li.mx_SpaceRoomDirectory_roomTileWrapper { li.mx_SpaceHierarchy_roomTileWrapper {
list-style: none; list-style: none;
} }
.mx_SpaceRoomDirectory_roomTile, .mx_SpaceHierarchy_roomTile,
.mx_SpaceRoomDirectory_subspace_children { .mx_SpaceHierarchy_subspace_children {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -295,12 +287,12 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_actions { .mx_SpaceHierarchy_actions {
.mx_SpaceRoomDirectory_actionsText { .mx_SpaceHierarchy_actionsText {
font-weight: normal; font-weight: normal;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
@ -311,7 +303,7 @@ limitations under the License.
margin: 20px 0; margin: 20px 0;
} }
.mx_SpaceRoomDirectory_createRoom { .mx_SpaceHierarchy_createRoom {
display: block; display: block;
margin: 16px auto 0; margin: 16px auto 0;
width: max-content; width: max-content;

12
res/css/structures/_SpacePanel.scss
View file

@ -20,13 +20,7 @@ $gutterSize: 16px;
$activeBorderTransparentGap: 1px; $activeBorderTransparentGap: 1px;
$activeBackgroundColor: $roomtile-selected-bg-color; $activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color; $activeBorderColor: $secondary-content;
.mx_MatrixChat--with-avatar {
.mx_SpacePanel {
background-color: transparent;
}
}
.mx_SpacePanel { .mx_SpacePanel {
background-color: $groupFilterPanel-bg-color; background-color: $groupFilterPanel-bg-color;
@ -34,6 +28,8 @@ $activeBorderColor: $secondary-fg-color;
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
// Fix for the blurred avatar-background
z-index: 1;
// Create another flexbox so the Panel fills the container // Create another flexbox so the Panel fills the container
display: flex; display: flex;
@ -242,7 +238,7 @@ $activeBorderColor: $secondary-fg-color;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/context-menu.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
background: $primary-fg-color; background: $primary-content;
} }
} }
} }

41
res/css/structures/_SpaceRoomView.scss
View file

@ -32,7 +32,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
> span { > span {
color: $secondary-fg-color; color: $secondary-content;
} }
&::before { &::before {
@ -45,7 +45,7 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 24px; mask-size: 24px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
} }
&:hover { &:hover {
@ -56,7 +56,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
> span { > span {
color: $primary-fg-color; color: $primary-content;
} }
} }
} }
@ -75,13 +75,13 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 0; margin: 0;
font-size: $font-24px; font-size: $font-24px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $primary-fg-color; color: $primary-content;
width: max-content; width: max-content;
} }
.mx_SpaceRoomView_description { .mx_SpaceRoomView_description {
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
margin-top: 12px; margin-top: 12px;
margin-bottom: 24px; margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth; max-width: $SpaceRoomViewInnerWidth;
@ -157,7 +157,7 @@ $SpaceRoomViewInnerWidth: 428px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-top: 24px; margin-top: 24px;
position: relative; position: relative;
padding-left: 24px; padding-left: 24px;
@ -179,7 +179,7 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
@ -210,7 +210,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_inviter_mxid { .mx_SpaceRoomView_preview_inviter_mxid {
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }
@ -227,7 +227,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_topic { .mx_SpaceRoomView_preview_topic {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-22px; line-height: $font-22px;
color: $secondary-fg-color; color: $secondary-content;
margin: 20px 0; margin: 20px 0;
max-height: 160px; max-height: 160px;
overflow-y: auto; overflow-y: auto;
@ -261,7 +261,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing_name { .mx_SpaceRoomView_landing_name {
margin: 24px 0 16px; margin: 24px 0 16px;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
> span { > span {
display: inline-block; display: inline-block;
@ -334,7 +334,7 @@ $SpaceRoomViewInnerWidth: 428px;
top: 0; top: 0;
height: 24px; height: 24px;
width: 24px; width: 24px;
background: $tertiary-fg-color; background: $tertiary-content;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -358,16 +358,11 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceFeedbackPrompt { .mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-fg-color, .1); border: 1px solid rgba($primary-content, .1);
border-radius: 8px; border-radius: 8px;
width: max-content; width: max-content;
margin: 0 0 -40px auto; // collapse its own height to not push other components down margin: 0 0 -40px auto; // collapse its own height to not push other components down
} }
.mx_SpaceRoomDirectory_list {
// we don't want this container to get forced into the flexbox layout
display: contents;
}
} }
.mx_SpaceRoomView_privateScope { .mx_SpaceRoomView_privateScope {
@ -392,7 +387,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 432px; width: 432px;
border-radius: 8px; border-radius: 8px;
background-color: $info-plinth-bg-color; background-color: $info-plinth-bg-color;
color: $secondary-fg-color; color: $secondary-content;
box-sizing: border-box; box-sizing: border-box;
> h3 { > h3 {
@ -419,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
position: absolute; position: absolute;
top: 14px; top: 14px;
left: 14px; left: 14px;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
@ -442,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView_inviteTeammates_buttons { .mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color; color: $secondary-content;
margin-top: 28px; margin-top: 28px;
.mx_AccessibleButton { .mx_AccessibleButton {
@ -458,7 +453,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 24px; width: 24px;
top: 0; top: 0;
left: 0; left: 0;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
@ -477,7 +472,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView_info { .mx_SpaceRoomView_info {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
margin: 20px 0; margin: 20px 0;
@ -496,7 +491,7 @@ $SpaceRoomViewInnerWidth: 428px;
left: -2px; left: -2px;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
} }
} }

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

@ -80,7 +80,7 @@ limitations under the License.
.mx_TabbedView_tabLabel_text { .mx_TabbedView_tabLabel_text {
font-size: 15px; font-size: 15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

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

@ -36,8 +36,8 @@ limitations under the License.
.mx_Toast_toast { .mx_Toast_toast {
grid-row: 1 / 3; grid-row: 1 / 3;
grid-column: 1; grid-column: 1;
color: $primary-fg-color;
background-color: $system; background-color: $system;
color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@ -63,7 +63,7 @@ limitations under the License.
&.mx_Toast_icon_verification::after { &.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg"); mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-fg-color; background-color: $primary-content;
} }
&.mx_Toast_icon_verification_warning { &.mx_Toast_icon_verification_warning {
@ -82,7 +82,7 @@ limitations under the License.
&.mx_Toast_icon_secure_backup::after { &.mx_Toast_icon_secure_backup::after {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_Toast_title, .mx_Toast_body { .mx_Toast_title, .mx_Toast_body {
@ -163,7 +163,7 @@ limitations under the License.
} }
.mx_Toast_detail { .mx_Toast_detail {
color: $secondary-fg-color; color: $secondary-content;
} }
.mx_Toast_deviceID { .mx_Toast_deviceID {

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

@ -35,7 +35,7 @@ limitations under the License.
// we cheat opacity on the theme colour with an after selector here // we cheat opacity on the theme colour with an after selector here
&::after { &::after {
content: ''; content: '';
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse border-bottom: 1px solid $primary-content;
opacity: 0.2; opacity: 0.2;
display: block; display: block;
padding-top: 8px; padding-top: 8px;
@ -58,7 +58,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $tertiary-fg-color; background: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
} }
@ -176,7 +176,7 @@ limitations under the License.
width: 85%; width: 85%;
opacity: 0.2; opacity: 0.2;
border: none; border: none;
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse border-bottom: 1px solid $primary-content;
} }
&.mx_IconizedContextMenu { &.mx_IconizedContextMenu {
@ -292,7 +292,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

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

@ -24,7 +24,7 @@ limitations under the License.
.mx_ViewSource_heading { .mx_ViewSource_heading {
font-size: $font-17px; font-size: $font-17px;
font-weight: 400; font-weight: 400;
color: $primary-fg-color; color: $primary-content;
margin-top: 0.7em; margin-top: 0.7em;
} }

2
res/css/views/audio_messages/_AudioPlayer.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
} }
.mx_AudioPlayer_mediaName { .mx_AudioPlayer_mediaName {
color: $primary-fg-color; color: $primary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-15px; line-height: $font-15px;
text-overflow: ellipsis; text-overflow: ellipsis;

10
res/css/views/audio_messages/_SeekBar.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $quaternary-fg-color; background: $quaternary-content;
outline: none; // remove blue selection border outline: none; // remove blue selection border
position: relative; // for before+after pseudo elements later on position: relative; // for before+after pseudo elements later on
@ -42,7 +42,7 @@ limitations under the License.
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
cursor: pointer; cursor: pointer;
} }
@ -50,7 +50,7 @@ limitations under the License.
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
cursor: pointer; cursor: pointer;
// Firefox adds a border on the thumb // Firefox adds a border on the thumb
@ -63,7 +63,7 @@ limitations under the License.
// in firefox, so it's just wasted CPU/GPU time. // in firefox, so it's just wasted CPU/GPU time.
&::before { // ::before to ensure it ends up under the thumb &::before { // ::before to ensure it ends up under the thumb
content: ''; content: '';
background-color: $tertiary-fg-color; background-color: $tertiary-content;
// Absolute positioning to ensure it overlaps with the existing bar // Absolute positioning to ensure it overlaps with the existing bar
position: absolute; position: absolute;
@ -81,7 +81,7 @@ limitations under the License.
// This is firefox's built-in support for the above, with 100% less hacks. // This is firefox's built-in support for the above, with 100% less hacks.
&::-moz-range-progress { &::-moz-range-progress {
background-color: $tertiary-fg-color; background-color: $tertiary-content;
height: 1px; height: 1px;
} }

2
res/css/views/auth/_AuthButtons.scss
View file

@ -39,7 +39,7 @@ limitations under the License.
min-width: 80px; min-width: 80px;
background-color: $accent-color; background-color: $accent-color;
color: $primary-bg-color; color: $background;
cursor: pointer; cursor: pointer;

2
res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -47,7 +47,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
mask-image: url('$(res)/img/globe.svg'); mask-image: url('$(res)/img/globe.svg');
} }

10
res/css/views/beta/_BetaCard.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-fg-color; color: $primary-content;
margin: 4px 0 14px; margin: 4px 0 14px;
.mx_BetaCard_betaPill { .mx_BetaCard_betaPill {
@ -40,7 +40,7 @@ limitations under the License.
.mx_BetaCard_caption { .mx_BetaCard_caption {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-20px; line-height: $font-20px;
color: $secondary-fg-color; color: $secondary-content;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -54,7 +54,7 @@ limitations under the License.
.mx_BetaCard_disclaimer { .mx_BetaCard_disclaimer {
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
margin-top: 20px; margin-top: 20px;
} }
} }
@ -72,13 +72,13 @@ limitations under the License.
margin: 16px 0 0; margin: 16px 0 0;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
.mx_SettingsFlag_microcopy { .mx_SettingsFlag_microcopy {
margin-top: 4px; margin-top: 4px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }

6
res/css/views/context_menus/_IconizedContextMenu.scss
View file

@ -36,7 +36,7 @@ limitations under the License.
// //
// Therefore, we just hack in a line and border the thing ourselves // Therefore, we just hack in a line and border the thing ourselves
&::before { &::before {
border-top: 1px solid $primary-fg-color; border-top: 1px solid $primary-content;
opacity: 0.1; opacity: 0.1;
content: ''; content: '';
@ -63,7 +63,7 @@ limitations under the License.
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
text-decoration: none; text-decoration: none;
color: $primary-fg-color; color: $primary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -119,7 +119,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

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

@ -30,7 +30,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

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

@ -27,7 +27,7 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 6.5px 11px; padding: 6.5px 11px;
background-color: $primary-bg-color; background-color: $background;
font-weight: normal; font-weight: normal;
margin: 0 0 10px; margin: 0 0 10px;
} }

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

@ -44,7 +44,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0; margin: 0;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;
@ -66,7 +66,7 @@ limitations under the License.
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
.mx_ProgressBar { .mx_ProgressBar {
height: 8px; height: 8px;
@ -79,7 +79,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
} }
> * { > * {
@ -105,7 +105,7 @@ limitations under the License.
margin-top: 4px; margin-top: 4px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $primary-fg-color; color: $primary-content;
} }
} }
@ -126,7 +126,7 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
background-color: $primary-fg-color; background-color: $primary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
@ -145,7 +145,7 @@ limitations under the License.
.mx_AddExistingToSpaceDialog { .mx_AddExistingToSpaceDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -188,7 +188,7 @@ limitations under the License.
padding-left: 0; padding-left: 0;
flex: unset; flex: unset;
height: unset; height: unset;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -221,7 +221,7 @@ limitations under the License.
} }
.mx_SubspaceSelector_onlySpace { .mx_SubspaceSelector_onlySpace {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
} }

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

@ -65,7 +65,7 @@ limitations under the License.
.mx_CommunityPrototypeInviteDialog_personName { .mx_CommunityPrototypeInviteDialog_personName {
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
margin-left: 7px; margin-left: 7px;
} }

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

@ -35,8 +35,8 @@ limitations under the License.
.mx_ConfirmUserActionDialog_reasonField { .mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
border-radius: 3px; border-radius: 3px;
border: solid 1px $input-border-color; border: solid 1px $input-border-color;

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

@ -29,8 +29,8 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_CreateGroupDialog_input_hasPrefixAndSuffix { .mx_CreateGroupDialog_input_hasPrefixAndSuffix {

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

@ -55,8 +55,8 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
width: 100%; width: 100%;
} }

10
res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_CreateSpaceFromCommunityDialog { .mx_CreateSpaceFromCommunityDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -73,7 +73,7 @@ limitations under the License.
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
.mx_ProgressBar { .mx_ProgressBar {
height: 8px; height: 8px;
@ -86,7 +86,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
} }
> * { > * {
@ -112,7 +112,7 @@ limitations under the License.
margin-top: 4px; margin-top: 4px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $primary-fg-color; color: $primary-content;
} }
} }
@ -138,7 +138,7 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
background-color: $primary-fg-color; background-color: $primary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;

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

@ -23,7 +23,7 @@ limitations under the License.
.mx_CreateSubspaceDialog { .mx_CreateSubspaceDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -57,7 +57,7 @@ limitations under the License.
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
> * { > * {
vertical-align: middle; vertical-align: middle;

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

@ -33,7 +33,7 @@ limitations under the License.
padding-left: 52px; padding-left: 52px;
> p { > p {
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_ForwardDialog { .mx_ForwardDialog {
width: 520px; width: 520px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -25,7 +25,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0 0 6px; margin: 0 0 6px;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_GenericFeatureFeedbackDialog { .mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading { .mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-20px; line-height: $font-20px;
margin-bottom: 24px; margin-bottom: 24px;

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

@ -70,11 +70,11 @@ limitations under the License.
} }
.mx_HostSignupDialog_text_dark { .mx_HostSignupDialog_text_dark {
color: $primary-fg-color; color: $primary-content;
} }
.mx_HostSignupDialog_text_light { .mx_HostSignupDialog_text_light {
color: $secondary-fg-color; color: $secondary-content;
} }
.mx_HostSignup_maximize_button { .mx_HostSignup_maximize_button {

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

@ -56,7 +56,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
min-width: 40%; min-width: 40%;
flex: 1 !important; flex: 1 !important;
color: $primary-fg-color !important; color: $primary-content !important;
} }
} }
@ -94,7 +94,7 @@ limitations under the License.
} }
> span { > span {
color: $primary-fg-color; color: $primary-content;
} }
.mx_InviteDialog_subname { .mx_InviteDialog_subname {
@ -110,7 +110,7 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
> span { > span {
color: $primary-fg-color; color: $primary-content;
font-weight: 600; font-weight: 600;
} }
@ -220,7 +220,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
margin-left: 7px; margin-left: 7px;
} }
@ -352,7 +352,7 @@ limitations under the License.
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
margin-top: 0; margin-top: 0;
border-color: $quaternary-fg-color; border-color: $quaternary-content;
input { input {
font-size: 18px; font-size: 18px;
@ -418,7 +418,7 @@ limitations under the License.
> h4 { > h4 {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
font-weight: normal; font-weight: normal;
} }
@ -432,14 +432,14 @@ limitations under the License.
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $primary-fg-color; color: $primary-content;
} }
.mx_InviteDialog_multiInviterError_entry_userId { .mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px; margin-left: 6px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

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

@ -19,7 +19,7 @@ limitations under the License.
font-weight: normal; font-weight: normal;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
.mx_Dropdown_input { .mx_Dropdown_input {
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
@ -44,7 +44,7 @@ limitations under the License.
top: 8px; top: 8px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
} }

6
res/css/views/dialogs/_LeaveSpaceDialog.scss
View file

@ -63,7 +63,7 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ''; content: '';
@ -72,7 +72,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering top: calc(50% - 8px); // vertical centering
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
@ -81,7 +81,7 @@ limitations under the License.
} }
> p { > p {
color: $primary-fg-color; color: $primary-content;
} }
} }

10
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_ManageRestrictedJoinRuleDialog { .mx_ManageRestrictedJoinRuleDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -52,7 +52,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0; margin: 0;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;
@ -85,7 +85,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_Checkbox { .mx_Checkbox {
@ -113,7 +113,7 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ''; content: '';
@ -122,7 +122,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering top: calc(50% - 8px); // vertical centering
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');

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

@ -37,7 +37,7 @@ limitations under the License.
list-style-type: none; list-style-type: none;
font-size: $font-14px; font-size: $font-14px;
padding: 0; padding: 0;
color: $primary-fg-color; color: $primary-content;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion { span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px; padding: 0px 2px;

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

@ -19,7 +19,7 @@ limitations under the License.
.mx_Dialog_content { .mx_Dialog_content {
margin-bottom: 24px; margin-bottom: 24px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_Dialog_primary { .mx_Dialog_primary {

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

@ -72,7 +72,7 @@ limitations under the License.
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
font-size: 16pt; font-size: 16pt;
color: $primary-fg-color; color: $primary-content;
} }
> * { > * {
@ -81,7 +81,7 @@ limitations under the License.
} }
.workspace-channel-details { .workspace-channel-details {
color: $primary-fg-color; color: $primary-content;
font-weight: 600; font-weight: 600;
.channel { .channel {

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

@ -17,10 +17,10 @@ limitations under the License.
.mx_ServerOfflineDialog { .mx_ServerOfflineDialog {
.mx_ServerOfflineDialog_content { .mx_ServerOfflineDialog_content {
padding-right: 85px; padding-right: 85px;
color: $primary-fg-color; color: $primary-content;
hr { hr {
border-color: $primary-fg-color; border-color: $primary-content;
opacity: 0.1; opacity: 0.1;
border-bottom: none; border-bottom: none;
} }

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

@ -22,7 +22,7 @@ limitations under the License.
margin-bottom: 0; margin-bottom: 0;
> p { > p {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-14px; font-size: $font-14px;
margin: 16px 0; margin: 16px 0;
@ -38,7 +38,7 @@ limitations under the License.
> h4 { > h4 {
font-size: $font-15px; font-size: $font-15px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $secondary-fg-color; color: $secondary-content;
margin-left: 8px; margin-left: 8px;
} }

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

@ -19,7 +19,7 @@ limitations under the License.
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $input-fg-color; color: $input-fg-color;
background-color: $primary-bg-color; background-color: $background;
font-size: $font-15px; font-size: $font-15px;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;

6
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_SpaceSettingsDialog { .mx_SpaceSettingsDialog {
color: $primary-fg-color; color: $primary-content;
.mx_SpaceSettings_errorText { .mx_SpaceSettings_errorText {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
@ -50,13 +50,13 @@ limitations under the License.
.mx_RadioButton_content { .mx_RadioButton_content {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-18px; line-height: $font-18px;
color: $primary-fg-color; color: $primary-content;
} }
& + span { & + span {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
color: $secondary-fg-color; color: $secondary-content;
margin-left: 26px; margin-left: 26px;
} }
} }

2
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -44,7 +44,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_AccessSecretStorageDialog_resetBadge::before { .mx_AccessSecretStorageDialog_resetBadge::before {

4
res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
View file

@ -56,7 +56,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_CreateSecretStorageDialog_secureBackupTitle::before { .mx_CreateSecretStorageDialog_secureBackupTitle::before {
@ -101,7 +101,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_CreateSecretStorageDialog_optionIcon_securePhrase { .mx_CreateSecretStorageDialog_optionIcon_securePhrase {

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

@ -26,7 +26,7 @@ limitations under the License.
&::before { &::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg"); mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-content;
content: ""; content: "";
position: absolute; position: absolute;
top: -6px; top: -6px;

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

@ -34,7 +34,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
border: 1px solid $dialog-close-fg-color; border: 1px solid $dialog-close-fg-color;
background-color: $primary-bg-color; background-color: $background;
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
overflow-y: auto; overflow-y: auto;
} }
@ -153,7 +153,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_NetworkDropdown_handle_server { .mx_NetworkDropdown_handle_server {

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_AddressSelector { .mx_AddressSelector {
position: absolute; position: absolute;
background-color: $primary-bg-color; background-color: $background;
width: 485px; width: 485px;
max-height: 116px; max-height: 116px;
overflow-y: auto; overflow-y: auto;
@ -31,8 +31,8 @@ limitations under the License.
} }
.mx_AddressSelector_addressListElement .mx_AddressTile { .mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color; background-color: $background;
border: solid 1px $primary-bg-color; border: solid 1px $background;
} }
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {

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

@ -20,7 +20,7 @@ limitations under the License.
background-color: rgba(74, 73, 74, 0.1); background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color; border: solid 1px $input-border-color;
line-height: $font-26px; line-height: $font-26px;
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
font-weight: normal; font-weight: normal;
margin-right: 4px; margin-right: 4px;

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_Dropdown { .mx_Dropdown {
position: relative; position: relative;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Dropdown_disabled { .mx_Dropdown_disabled {
@ -52,7 +52,7 @@ limitations under the License.
padding-right: 9px; padding-right: 9px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
.mx_Dropdown_option { .mx_Dropdown_option {
@ -111,7 +111,7 @@ input.mx_Dropdown_option:focus {
padding: 0px; padding: 0px;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-focused-border-color; border: 1px solid $input-focused-border-color;
background-color: $primary-bg-color; background-color: $background;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }

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

@ -25,7 +25,7 @@ limitations under the License.
} }
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color; border: 1px solid $background;
} }
.mx_BaseAvatar_initial { .mx_BaseAvatar_initial {
@ -47,7 +47,7 @@ limitations under the License.
left: 0; left: 0;
height: inherit; height: inherit;
width: inherit; width: inherit;
background: $tertiary-fg-color; background: $tertiary-content;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -60,6 +60,6 @@ limitations under the License.
margin-left: 12px; margin-left: 12px;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

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

@ -46,8 +46,8 @@ limitations under the License.
// corners on the field above. // corners on the field above.
border-radius: 4px; border-radius: 4px;
padding: 8px 9px; padding: 8px 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@ -67,7 +67,7 @@ limitations under the License.
height: 6px; height: 6px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-content;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
@ -100,7 +100,7 @@ limitations under the License.
color 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s; background-color 0.25s ease-out 0.1s;
color: $primary-fg-color; color: $primary-content;
background-color: transparent; background-color: transparent;
font-size: $font-14px; font-size: $font-14px;
position: absolute; position: absolute;

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

@ -32,12 +32,12 @@ limitations under the License.
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ""; content: "";
margin-right: 8px; margin-right: 8px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-image: url('$(res)/img/feather-customised/eye.svg'); mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block; display: inline-block;
width: 18px; width: 18px;

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

@ -37,7 +37,7 @@ limitations under the License.
right: -6px; right: -6px;
bottom: -6px; bottom: -6px;
background-color: $primary-bg-color; background-color: $background;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
@ -45,7 +45,7 @@ limitations under the License.
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg'); mask-image: url('$(res)/img/element-icons/camera.svg');

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

@ -43,7 +43,7 @@ a.mx_Pill {
/* More specific to override `.markdown-body a` color */ /* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill, .mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill { .mx_UserPill {
color: $primary-fg-color; color: $primary-content;
background-color: $other-user-pill-bg-color; background-color: $other-user-pill-bg-color;
} }

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

@ -35,7 +35,7 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
color: $primary-fg-color; color: $primary-content;
> img { > img {
object-fit: contain; object-fit: contain;

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

@ -74,7 +74,7 @@ limitations under the License.
.mx_ServerPicker_desc { .mx_ServerPicker_desc {
margin-top: -12px; margin-top: -12px;
color: $tertiary-fg-color; color: $tertiary-content;
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 3; grid-row: 3;
margin-bottom: 16px; margin-bottom: 16px;

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

@ -37,7 +37,7 @@ limitations under the License.
} }
.mx_Spinner_icon { .mx_Spinner_icon {
background-color: $primary-fg-color; background-color: $primary-content;
mask: url('$(res)/img/spinner.svg'); mask: url('$(res)/img/spinner.svg');
mask-size: contain; mask-size: contain;
animation: 1.1s steps(12, end) infinite spin; animation: 1.1s steps(12, end) infinite spin;

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

@ -25,7 +25,7 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
min-width: 70px; min-width: 70px;
padding: 0; // override from button styles padding: 0 8px; // override from button styles
margin-left: 16px; // distance from <Field> margin-left: 16px; // distance from <Field>
} }
@ -50,7 +50,7 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
border-radius: 20px; border-radius: 20px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
opacity: 0.15; opacity: 0.15;
position: absolute; position: absolute;
top: 0; top: 0;

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

@ -84,7 +84,7 @@ limitations under the License.
// These tooltips use an older style with a chevron // These tooltips use an older style with a chevron
.mx_Field_tooltip { .mx_Field_tooltip {
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-content;
border: 1px solid $menu-border-color; border: 1px solid $menu-border-color;
text-align: unset; text-align: unset;

6
res/css/views/emojipicker/_EmojiPicker.scss
View file

@ -57,7 +57,7 @@ limitations under the License.
} }
.mx_EmojiPicker_anchor::before { .mx_EmojiPicker_anchor::before {
background-color: $primary-fg-color; background-color: $primary-content;
content: ''; content: '';
display: inline-block; display: inline-block;
mask-size: 100%; mask-size: 100%;
@ -89,7 +89,7 @@ limitations under the License.
margin: 8px; margin: 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
background-color: $primary-bg-color; background-color: $background;
display: flex; display: flex;
input { input {
@ -126,7 +126,7 @@ limitations under the License.
.mx_EmojiPicker_search_icon::after { .mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat; mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%; mask-size: 100%;
background-color: $primary-fg-color; background-color: $primary-content;
content: ''; content: '';
display: inline-block; display: inline-block;
width: 100%; width: 100%;

2
res/css/views/groups/_GroupRoomList.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_GroupRoomTile { .mx_GroupRoomTile {
position: relative; position: relative;
color: $primary-fg-color; color: $primary-content;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;

8
res/css/views/messages/_CallEvent.scss
View file

@ -41,7 +41,7 @@ limitations under the License.
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
@ -116,7 +116,7 @@ limitations under the License.
.mx_CallEvent_type { .mx_CallEvent_type {
font-weight: 400; font-weight: 400;
color: $secondary-fg-color; color: $secondary-content;
font-size: 1.2rem; font-size: 1.2rem;
line-height: $font-13px; line-height: $font-13px;
display: flex; display: flex;
@ -132,7 +132,7 @@ limitations under the License.
position: absolute; position: absolute;
height: 13px; height: 13px;
width: 13px; width: 13px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
@ -145,7 +145,7 @@ limitations under the License.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: $secondary-fg-color; color: $secondary-content;
margin-right: 16px; margin-right: 16px;
gap: 8px; gap: 8px;
min-width: max-content; min-width: max-content;

4
res/css/views/messages/_MImageBody.scss
View file

@ -38,7 +38,7 @@ $timelineImageBorderRadius: 4px;
} }
.mx_no-image-placeholder { .mx_no-image-placeholder {
background-color: $primary-bg-color; background-color: $primary-content;
} }
} }
@ -100,5 +100,5 @@ $timelineImageBorderRadius: 4px;
} }
.mx_EventTile:hover .mx_HiddenImagePlaceholder { .mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: $primary-bg-color; background-color: $background;
} }

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

@ -23,7 +23,7 @@ limitations under the License.
height: 32px; height: 32px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 8px; border-radius: 8px;
background: $primary-bg-color; background: $background;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
top: -32px; top: -32px;
right: 8px; right: 8px;
@ -77,11 +77,11 @@ limitations under the License.
mask-size: 18px; mask-size: 18px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
.mx_MessageActionBar_maskButton:hover::after { .mx_MessageActionBar_maskButton:hover::after {
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_MessageActionBar_reactButton::after { .mx_MessageActionBar_reactButton::after {

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReactionsRow { .mx_ReactionsRow {
margin: 6px 0; margin: 6px 0;
color: $primary-fg-color; color: $primary-content;
.mx_ReactionsRow_addReactionButton { .mx_ReactionsRow_addReactionButton {
position: relative; position: relative;
@ -36,7 +36,7 @@ limitations under the License.
mask-size: 16px; mask-size: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
} }
@ -46,7 +46,7 @@ limitations under the License.
&:hover, &.mx_ReactionsRow_addReactionButton_active { &:hover, &.mx_ReactionsRow_addReactionButton_active {
&::before { &::before {
background-color: $primary-fg-color; background-color: $primary-content;
} }
} }
} }
@ -64,10 +64,10 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
&:link, &:visited { &:link, &:visited {
color: $tertiary-fg-color; color: $tertiary-content;
} }
&:hover { &:hover {
color: $primary-fg-color; color: $primary-content;
} }
} }

4
res/css/views/right_panel/_BaseCard.scss
View file

@ -93,7 +93,7 @@ limitations under the License.
} }
> h1 { > h1 {
color: $tertiary-fg-color; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: 500; font-weight: 500;
} }
@ -145,7 +145,7 @@ limitations under the License.
justify-content: space-around; justify-content: space-around;
.mx_AccessibleButton_kind_secondary { .mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color; color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2); background-color: rgba(141, 151, 165, 0.2);
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;

8
res/css/views/right_panel/_PinnedMessagesCard.scss
View file

@ -48,7 +48,7 @@ limitations under the License.
height: 32px; height: 32px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 8px; border-radius: 8px;
background: $primary-bg-color; background: $background;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 1px; padding: 1px;
width: max-content; width: max-content;
@ -66,7 +66,7 @@ limitations under the License.
z-index: 1; z-index: 1;
&::after { &::after {
background-color: $primary-fg-color; background-color: $primary-content;
} }
} }
} }
@ -75,7 +75,7 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-top: 24px; margin-top: 24px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -83,7 +83,7 @@ limitations under the License.
> span { > span {
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }

6
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomSummaryCard_alias { .mx_RoomSummaryCard_alias {
font-size: $font-13px; font-size: $font-13px;
color: $secondary-fg-color; color: $secondary-content;
} }
h2, .mx_RoomSummaryCard_alias { h2, .mx_RoomSummaryCard_alias {
@ -115,7 +115,7 @@ limitations under the License.
// as we will be applying it in its children // as we will be applying it in its children
padding: 0; padding: 0;
height: auto; height: auto;
color: $tertiary-fg-color; color: $tertiary-content;
.mx_RoomSummaryCard_icon_app { .mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
@ -128,7 +128,7 @@ limitations under the License.
} }
span { span {
color: $primary-fg-color; color: $primary-content;
} }
} }

2
res/css/views/right_panel/_UserInfo.scss
View file

@ -55,7 +55,7 @@ limitations under the License.
} }
.mx_UserInfo_separator { .mx_UserInfo_separator {
border-bottom: 1px solid rgba($primary-fg-color, .1); border-bottom: 1px solid rgba($primary-content, .1);
} }
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {

2
res/css/views/right_panel/_WidgetCard.scss
View file

@ -51,7 +51,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
} }

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

@ -64,7 +64,7 @@ $MiniAppTileHeight: 200px;
&:hover { &:hover {
.mx_AppsContainer_resizerHandle::after { .mx_AppsContainer_resizerHandle::after {
opacity: 0.8; opacity: 0.8;
background: $primary-fg-color; background: $primary-content;
} }
.mx_ResizeHandle_horizontal::before { .mx_ResizeHandle_horizontal::before {
@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
content: ''; content: '';
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

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

@ -4,7 +4,7 @@
z-index: 1001; z-index: 1001;
width: 100%; width: 100%;
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
background: $primary-bg-color; background: $background;
border-bottom: none; border-bottom: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
max-height: 35vh; max-height: 35vh;
@ -26,7 +26,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Autocomplete_Completion_block * { .mx_Autocomplete_Completion_block * {
@ -42,7 +42,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Autocomplete_Completion_pill > * { .mx_Autocomplete_Completion_pill > * {
@ -84,7 +84,7 @@
.mx_Autocomplete_provider_name { .mx_Autocomplete_provider_name {
margin: 12px; margin: 12px;
color: $primary-fg-color; color: $primary-content;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }

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

@ -31,7 +31,7 @@ limitations under the License.
@keyframes visualbell { @keyframes visualbell {
from { background-color: $visual-bell-bg-color; } from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; } to { background-color: $background; }
} }
&.mx_BasicMessageComposer_input_error { &.mx_BasicMessageComposer_input_error {

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

@ -28,7 +28,7 @@ limitations under the License.
.mx_BasicMessageComposer_input { .mx_BasicMessageComposer_input {
border-radius: 4px; border-radius: 4px;
border: solid 1px $primary-hairline-color; border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color; background-color: $background;
max-height: 200px; max-height: 200px;
padding: 3px 6px; padding: 3px 6px;

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

@ -18,7 +18,7 @@ limitations under the License.
.mx_EntityTile { .mx_EntityTile {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
cursor: pointer; cursor: pointer;
.mx_E2EIcon { .mx_E2EIcon {
@ -86,12 +86,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-content;
} }
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name { .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-content;
} }
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_avatar,

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

@ -55,7 +55,7 @@ $hover-select-border: 4px;
} }
.mx_SenderProfile { .mx_SenderProfile {
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */ display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden; overflow: hidden;
@ -161,7 +161,7 @@ $hover-select-border: 4px;
// up with the other read receipts // up with the other read receipts
&::before { &::before {
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 14px; mask-size: 14px;
@ -618,7 +618,7 @@ $hover-select-border: 4px;
} }
.mx_EventTile_keyRequestInfo_text a { .mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color; color: $primary-content;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }

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

@ -56,7 +56,7 @@ limitations under the License.
height: 38px; height: 38px;
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $background;
border: 1.3px solid $muted-fg-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }

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

@ -111,7 +111,7 @@ limitations under the License.
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: $font-15px; font-size: $font-15px;
color: $primary-fg-color; color: $primary-content;
margin-left: 8px; margin-left: 8px;
line-height: $font-23px; line-height: $font-23px;
} }

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

@ -130,7 +130,7 @@ limitations under the License.
@keyframes visualbell { @keyframes visualbell {
from { background-color: $visual-bell-bg-color; } from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; } to { background-color: $background; }
} }
.mx_MessageComposer_input_error { .mx_MessageComposer_input_error {
@ -160,8 +160,8 @@ limitations under the License.
resize: none; resize: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
font-size: $font-14px; font-size: $font-14px;
max-height: 120px; max-height: 120px;
overflow: auto; overflow: auto;

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

@ -67,6 +67,6 @@ limitations under the License.
> p { > p {
margin: 0; margin: 0;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }

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

@ -42,7 +42,7 @@ limitations under the License.
// These are the 3 background types // These are the 3 background types
&.mx_NotificationBadge_dot { &.mx_NotificationBadge_dot {
background-color: $primary-fg-color; // increased visibility background-color: $primary-content; // increased visibility
width: 6px; width: 6px;
height: 6px; height: 6px;

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

@ -67,7 +67,7 @@ limitations under the License.
//left: 0; //left: 0;
height: inherit; height: inherit;
width: inherit; width: inherit;
background: $secondary-fg-color; background: $secondary-content;
mask-position: center; mask-position: center;
mask-size: 8px; mask-size: 8px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -87,7 +87,7 @@ limitations under the License.
.mx_PinnedEventTile_timestamp { .mx_PinnedEventTile_timestamp {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
color: $secondary-fg-color; color: $secondary-content;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReplyPreview { .mx_ReplyPreview {
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
background: $primary-bg-color; background: $background;
border-bottom: none; border-bottom: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
max-height: 50vh; max-height: 50vh;
@ -28,7 +28,7 @@ limitations under the License.
.mx_ReplyPreview_header { .mx_ReplyPreview_header {
margin: 8px; margin: 8px;
color: $primary-fg-color; color: $primary-content;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }

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

@ -42,7 +42,7 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-decoration: none; text-decoration: none;
color: $primary-fg-color; color: $primary-content;
} }
.mx_RedactedBody { .mx_RedactedBody {

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_RoomHeader { .mx_RoomHeader {
flex: 0 0 50px; flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
background-color: $roomheader-bg-color; background-color: $background;
.mx_RoomHeader_e2eIcon { .mx_RoomHeader_e2eIcon {
height: 12px; height: 12px;
@ -74,7 +74,7 @@ limitations under the License.
.mx_RoomHeader_buttons { .mx_RoomHeader_buttons {
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {

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

@ -43,11 +43,11 @@ limitations under the License.
div:first-child { div:first-child {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-18px; line-height: $font-18px;
color: $primary-fg-color; color: $primary-content;
} }
.mx_AccessibleButton { .mx_AccessibleButton {
color: $primary-fg-color; color: $primary-content;
position: relative; position: relative;
padding: 8px 8px 8px 32px; padding: 8px 8px 8px 32px;
font-size: inherit; font-size: inherit;
@ -64,7 +64,7 @@ limitations under the License.
position: absolute; position: absolute;
top: 8px; top: 8px;
left: 8px; left: 8px;
background: $secondary-fg-color; background: $secondary-content;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;

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