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

Merge branch 'develop' into export-conversations

Browse source
This commit is contained in:
Jaiwanth 2021-09-22 18:07:01 +05:30
commit 94e4fb71c1
498 changed files with 13790 additions and 23008 deletions
Download patch file Download diff file Expand all files Collapse all files

27
res/css/_animations.scss
View file

@ -34,18 +34,43 @@ limitations under the License.
transition: opacity 300ms ease;
}
@keyframes mx--anim-pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
@keyframes mx_Dialog_lightbox_background_keyframes {
from {
opacity: 0;
}
to {
opacity: $lightbox-background-bg-opacity;
}
}
@keyframes mx_ImageView_panel_keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion) {
@keyframes mx--anim-pulse {
// Override all keyframes in reduced-motion
}
@keyframes mx_Dialog_lightbox_background_keyframes {
// Override all keyframes in reduced-motion
}
@keyframes mx_ImageView_panel_keyframes {
// Override all keyframes in reduced-motion
}
.mx_rtg--fade-enter-active {
transition: none;
}

26
res/css/_common.scss
View file

@ -53,8 +53,8 @@ html {
body {
font-family: $font-family;
font-size: $font-15px;
background-color: $primary-bg-color;
color: $primary-fg-color;
background-color: $background;
color: $primary-content;
border: 0px;
margin: 0px;
@ -89,7 +89,7 @@ b {
}
h2 {
color: $primary-fg-color;
color: $primary-content;
font-weight: 400;
font-size: $font-18px;
margin-top: 16px;
@ -142,12 +142,12 @@ textarea::placeholder {
input[type=text], input[type=password], textarea {
background-color: transparent;
color: $primary-fg-color;
color: $primary-content;
}
/* Required by Firefox */
textarea {
color: $primary-fg-color;
color: $primary-content;
}
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] {
border: none;
flex: 1;
color: $primary-fg-color;
color: $primary-content;
}
: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;
color: $input-darker-fg-color;
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
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],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $primary-bg-color;
background-color: $background;
border: none;
}
}
@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_Dialog {
background-color: $primary-bg-color;
background-color: $background;
color: $light-fg-color;
z-index: 4012;
font-weight: 300;
@ -318,6 +318,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 300ms;
}
.mx_Dialog_lightbox .mx_Dialog {
@ -379,7 +381,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
word-wrap: break-word;
}
@ -488,8 +490,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
}
.mx_textButton {

3
res/css/_components.scss
View file

@ -28,8 +28,8 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_SpaceHierarchy.scss";
@import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";
@ -133,6 +133,7 @@
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_EventTilePreview.scss";
@import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_ImageView.scss";

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

@ -21,19 +21,12 @@ limitations under the License.
height: 100vh;
width: 100%;
overflow: hidden;
&::before {
content: " ";
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background-color: var(--lp-background-overlay);
}
filter: blur(var(--lp-background-blur));
// Force a new layer for the backdropPanel so it's better hardware supported
transform: translateZ(0);
}
.mx_BackdropPanel--canvas {
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
@ -41,11 +34,4 @@ limitations under the License.
z-index: 0;
pointer-events: none;
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;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
color: $primary-fg-color;
color: $primary-content;
position: absolute;
font-size: $font-14px;
z-index: 5001;

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

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

28
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.
*/
.mx_MatrixChat--with-avatar {
.mx_GroupFilterPanel {
background-color: transparent;
}
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.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 {
z-index: 1;
background-color: $groupFilterPanel-bg-color;
flex: 1;
cursor: pointer;
@ -63,12 +73,6 @@ limitations under the License.
.mx_GroupFilterPanel .mx_TagTile {
// opacity: 0.5;
position: relative;
.mx_BetaDot {
position: absolute;
right: -13px;
top: -11px;
}
}
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
@ -82,13 +86,13 @@ limitations under the License.
}
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: $primary-bg-color;
background-color: $background;
border-radius: 6px;
}
.mx_TagTile_selected_prototype {
.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%;
height: 31px;
overflow: hidden;
color: $primary-fg-color;
color: $primary-content;
font-weight: bold;
font-size: $font-22px;
padding-left: 19px;
@ -397,7 +397,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
.mx_AccessibleButton_kind_link {
@ -422,7 +422,7 @@ limitations under the License.
mask-position: center;
mask-size: 8px;
mask-image: url('$(res)/img/image-view/close.svg');
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
}
}

46
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.
*/
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
$roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar {
@ -24,28 +23,38 @@ $roomListCollapsedWidth: 68px;
}
}
.mx_LeftPanel_wrapper {
display: flex;
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 {
background-color: $roomlist-bg-color;
// 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
display: flex;
contain: content;
position: relative;
.mx_LeftPanel_GroupFilterPanelContainer {
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
}
flex-grow: 1;
overflow: hidden;
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
@ -137,7 +146,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
background: $secondary-content;
}
}
@ -160,7 +169,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
background: $secondary-content;
}
&.mx_LeftPanel_exploreButton_space::before {
@ -178,6 +187,8 @@ $roomListCollapsedWidth: 68px;
}
.mx_LeftPanel_roomListWrapper {
// Make the y-scrollbar more responsive
padding-right: 2px;
overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter
flex: 1 0 0; // needed in Safari to properly set flex-basis
@ -199,6 +210,7 @@ $roomListCollapsedWidth: 68px;
// These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel_minimized {
flex-grow: 0;
min-width: unset;
width: unset !important;

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

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

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

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

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

@ -47,9 +47,7 @@ limitations under the License.
display: flex;
flex: 1;
flex-grow: 0;
min-height: 0;
max-width: 50%;
}
.mx_MatrixChat_syncError {
@ -65,8 +63,8 @@ limitations under the License.
}
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color;
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
background-color: $background;
flex: 1 1 0;
min-width: 0;
@ -93,7 +91,7 @@ limitations under the License.
content: ' ';
background-color: $primary-fg-color;
background-color: $primary-content;
opacity: 0.8;
}
}

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

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

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

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

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

@ -28,7 +28,7 @@ limitations under the License.
.mx_RoomDirectory {
margin-bottom: 12px;
color: $primary-fg-color;
color: $primary-content;
word-break: break-word;
display: flex;
flex-direction: column;
@ -71,14 +71,14 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $primary-fg-color;
color: $primary-content;
}
> p {
margin: 40px auto 60px;
font-size: $font-14px;
line-height: $font-20px;
color: $secondary-fg-color;
color: $secondary-content;
max-width: 464px; // easier reading
}
@ -97,7 +97,7 @@ limitations under the License.
}
.mx_RoomDirectory_table {
color: $primary-fg-color;
color: $primary-content;
display: grid;
font-size: $font-12px;
grid-template-columns: max-content auto max-content max-content max-content;
@ -183,3 +183,40 @@ limitations under the License.
padding: 0;
}
}
@media screen and (max-width: 700px) {
.mx_RoomDirectory_roomMemberCount {
padding: 0px;
}
.mx_AccessibleButton_kind_secondary {
padding: 0px !important;
}
.mx_RoomDirectory_join {
margin-left: 0px;
}
.mx_RoomDirectory_alias {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_RoomDirectory_roomDescription {
padding-bottom: 0px;
}
.mx_RoomDirectory_name {
margin-bottom: 5px;
}
.mx_RoomDirectory_roomAvatar {
margin-top: 10px;
}
.mx_RoomDirectory_table {
grid-template-columns: auto;
row-gap: 14px;
margin-top: 5px;
}
}

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

@ -33,14 +33,14 @@ limitations under the License.
height: 16px;
mask: url('$(res)/img/element-icons/roomlist/search.svg');
mask-repeat: no-repeat;
background-color: $secondary-fg-color;
background-color: $secondary-content;
margin-left: 7px;
}
.mx_RoomSearch_input {
border: none !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;
height: 100%;
width: 100%;
@ -48,12 +48,12 @@ limitations under the License.
line-height: $font-16px;
&: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 {
border-color: $secondary-fg-color;
border-color: $secondary-content;
}
&.mx_RoomSearch_focused {
@ -62,7 +62,7 @@ limitations under the License.
}
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
background-color: $roomlist-filter-active-bg-color;
background-color: $background;
.mx_RoomSearch_clearButton {
width: 16px;
@ -71,7 +71,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-fg-color;
background-color: $secondary-content;
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 {
margin-right: -12px;
border: 1px solid $primary-bg-color;
border: 1px solid $background;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
@ -39,7 +39,7 @@ limitations under the License.
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $primary-bg-color;
border: 1px solid $background;
border-radius: 40px;
width: 24px;
height: 24px;
@ -171,14 +171,14 @@ limitations under the License.
}
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color;
color: $primary-content;
font-size: $font-13px;
opacity: 0.5;
padding-bottom: 20px;
}
.mx_RoomStatusBar_resend_link {
color: $primary-fg-color !important;
color: $primary-content !important;
text-decoration: underline !important;
cursor: pointer;
}
@ -187,7 +187,7 @@ limitations under the License.
height: 50px;
line-height: $font-50px;
color: $primary-fg-color;
color: $primary-content;
opacity: 0.5;
overflow-y: hidden;
display: block;

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

@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
justify-content: center;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
contain: strict;
}
.mx_RoomView {
word-wrap: break-word;
display: flex;
@ -42,7 +52,7 @@ limitations under the License.
pointer-events: none;
background-color: $primary-bg-color;
background-color: $background;
opacity: 0.95;
position: absolute;
@ -89,7 +99,7 @@ limitations under the License.
left: 0;
right: 0;
z-index: 3000;
background-color: $primary-bg-color;
background-color: $background;
}
.mx_RoomView_auxPanel_hiddenHighlights {
@ -155,7 +165,6 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
contain: content;
}
.mx_RoomView_statusArea {
@ -163,7 +172,7 @@ limitations under the License.
flex: 0 0 auto;
max-height: 0px;
background-color: $primary-bg-color;
background-color: $background;
z-index: 1000;
overflow: hidden;
@ -248,7 +257,7 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: $primary-bg-color;
background-color: $background;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {

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

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

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

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

@ -20,13 +20,7 @@ $gutterSize: 16px;
$activeBorderTransparentGap: 1px;
$activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color;
.mx_MatrixChat--with-avatar {
.mx_SpacePanel {
background-color: transparent;
}
}
$activeBorderColor: $secondary-content;
.mx_SpacePanel {
background-color: $groupFilterPanel-bg-color;
@ -34,6 +28,8 @@ $activeBorderColor: $secondary-fg-color;
padding: 0;
margin: 0;
position: relative;
// Fix for the blurred avatar-background
z-index: 1;
// Create another flexbox so the Panel fills the container
display: flex;
@ -107,6 +103,16 @@ $activeBorderColor: $secondary-fg-color;
}
}
.mx_SpaceItem_new {
position: relative;
.mx_BetaDot {
position: absolute;
left: 33px;
top: -5px;
}
}
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize;
min-width: 40px;
@ -118,6 +124,7 @@ $activeBorderColor: $secondary-fg-color;
align-items: center;
padding: 4px 4px 4px 0;
width: 100%;
cursor: pointer;
&.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
@ -142,7 +149,6 @@ $activeBorderColor: $secondary-fg-color;
&:not(.mx_SpaceButton_narrow) {
.mx_SpaceButton_selectionWrapper {
width: 100%;
padding-right: 16px;
overflow: hidden;
}
}
@ -154,7 +160,6 @@ $activeBorderColor: $secondary-fg-color;
display: block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 8px;
font-size: $font-14px;
line-height: $font-18px;
}
@ -199,22 +204,17 @@ $activeBorderColor: $secondary-fg-color;
}
&.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $accent-color;
transition: all .1s ease-in-out; // TODO transition
background-color: $roomlist-button-bg-color;
&::before {
background-color: #ffffff;
background-color: $primary-content;
mask-image: url('$(res)/img/element-icons/plus.svg');
transition: all .2s ease-in-out; // TODO transition
}
}
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
background-color: $icon-button-color;
&::before {
transform: rotate(45deg);
}
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
transform: rotate(45deg);
}
.mx_BaseAvatar_image {
@ -228,8 +228,7 @@ $activeBorderColor: $secondary-fg-color;
margin-top: auto;
margin-bottom: auto;
display: none;
position: absolute;
right: 4px;
position: relative;
&::before {
top: 2px;
@ -242,14 +241,12 @@ $activeBorderColor: $secondary-fg-color;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/context-menu.svg');
background: $primary-fg-color;
background: $primary-content;
}
}
}
.mx_SpacePanel_badgeContainer {
position: absolute;
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
@ -267,6 +264,7 @@ $activeBorderColor: $secondary-fg-color;
&.collapsed {
.mx_SpaceButton {
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 0;
top: 0;
@ -296,19 +294,12 @@ $activeBorderColor: $secondary-fg-color;
}
&:not(.collapsed) {
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 4px;
}
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_invite) {
// Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer {
width: 0;
height: 0;
display: none;
}

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

@ -32,7 +32,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
> span {
color: $secondary-fg-color;
color: $secondary-content;
}
&::before {
@ -45,7 +45,7 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 24px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
}
&:hover {
@ -56,12 +56,15 @@ $SpaceRoomViewInnerWidth: 428px;
}
> span {
color: $primary-fg-color;
color: $primary-content;
}
}
}
.mx_SpaceRoomView {
overflow-y: auto;
flex: 1;
.mx_MainSplit > div:first-child {
padding: 80px 60px;
flex-grow: 1;
@ -72,13 +75,13 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 0;
font-size: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
color: $primary-content;
width: max-content;
}
.mx_SpaceRoomView_description {
font-size: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
margin-top: 12px;
margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth;
@ -154,7 +157,7 @@ $SpaceRoomViewInnerWidth: 428px;
font-weight: $font-semi-bold;
font-size: $font-14px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
margin-top: 24px;
position: relative;
padding-left: 24px;
@ -176,7 +179,7 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
}
@ -207,14 +210,15 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_inviter_mxid {
line-height: $font-24px;
color: $secondary-fg-color;
color: $secondary-content;
}
}
}
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
> .mx_RoomAvatar_isSpaceRoom {
&.mx_BaseAvatar_image, .mx_BaseAvatar_image {
border-radius: 12px;
}
}
h1.mx_SpaceRoomView_preview_name {
@ -224,7 +228,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_topic {
font-size: $font-14px;
line-height: $font-22px;
color: $secondary-fg-color;
color: $secondary-content;
margin: 20px 0;
max-height: 160px;
overflow-y: auto;
@ -248,6 +252,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing {
display: flex;
flex-direction: column;
min-width: 0;
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
@ -257,7 +262,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing_name {
margin: 24px 0 16px;
font-size: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
> span {
display: inline-block;
@ -330,7 +335,7 @@ $SpaceRoomViewInnerWidth: 428px;
top: 0;
height: 24px;
width: 24px;
background: $tertiary-fg-color;
background: $tertiary-content;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
@ -354,16 +359,11 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-fg-color, .1);
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
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 {
@ -388,7 +388,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 432px;
border-radius: 8px;
background-color: $info-plinth-bg-color;
color: $secondary-fg-color;
color: $secondary-content;
box-sizing: border-box;
> h3 {
@ -415,7 +415,7 @@ $SpaceRoomViewInnerWidth: 428px;
position: absolute;
top: 14px;
left: 14px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
}
@ -438,7 +438,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color;
color: $secondary-content;
margin-top: 28px;
.mx_AccessibleButton {
@ -454,7 +454,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 24px;
top: 0;
left: 0;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
@ -473,7 +473,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView_info {
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
margin: 20px 0;
@ -492,7 +492,7 @@ $SpaceRoomViewInnerWidth: 428px;
left: -2px;
mask-position: center;
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 {
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 {
grid-row: 1 / 3;
grid-column: 1;
color: $primary-fg-color;
background-color: $system;
color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
overflow: hidden;
@ -63,7 +63,7 @@ limitations under the License.
&.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-fg-color;
background-color: $primary-content;
}
&.mx_Toast_icon_verification_warning {
@ -82,7 +82,7 @@ limitations under the License.
&.mx_Toast_icon_secure_backup::after {
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 {
@ -163,7 +163,7 @@ limitations under the License.
}
.mx_Toast_detail {
color: $secondary-fg-color;
color: $secondary-content;
}
.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
&::after {
content: '';
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
border-bottom: 1px solid $primary-content;
opacity: 0.2;
display: block;
padding-top: 8px;
@ -58,7 +58,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-fg-color;
background: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
}
@ -176,7 +176,7 @@ limitations under the License.
width: 85%;
opacity: 0.2;
border: none;
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
border-bottom: 1px solid $primary-content;
}
&.mx_IconizedContextMenu {
@ -292,7 +292,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
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 {
font-size: $font-17px;
font-weight: 400;
color: $primary-fg-color;
color: $primary-content;
margin-top: 0.7em;
}

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

@ -96,3 +96,10 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot {
cursor: not-allowed;
}
}
.mx_Login_spinner {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 14px;
}

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

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

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

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

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

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

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

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

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

@ -29,7 +29,7 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
color: $primary-content;
margin: 4px 0 14px;
.mx_BetaCard_betaPill {
@ -40,7 +40,7 @@ limitations under the License.
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
color: $secondary-fg-color;
color: $secondary-content;
margin-bottom: 20px;
}
@ -54,7 +54,7 @@ limitations under the License.
.mx_BetaCard_disclaimer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
margin-top: 20px;
}
}
@ -72,13 +72,13 @@ limitations under the License.
margin: 16px 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
}
}
@ -113,6 +113,7 @@ $dot-size: 12px;
animation: mx_Beta_bluePulse 2s infinite;
animation-iteration-count: 20;
position: relative;
pointer-events: none;
&::after {
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
&::before {
border-top: 1px solid $primary-fg-color;
border-top: 1px solid $primary-content;
opacity: 0.1;
content: '';
@ -63,7 +63,7 @@ limitations under the License.
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-fg-color;
color: $primary-content;
font-size: $font-15px;
line-height: $font-24px;
@ -119,7 +119,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
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-size: contain;
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: 1px solid $input-border-color;
padding: 6.5px 11px;
background-color: $primary-bg-color;
background-color: $background;
font-weight: normal;
margin: 0 0 10px;
}

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

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

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

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

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

@ -35,8 +35,8 @@ limitations under the License.
.mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
border-radius: 3px;
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: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
}
.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: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
width: 100%;
}

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

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

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

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

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

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

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

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

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

@ -70,11 +70,11 @@ limitations under the License.
}
.mx_HostSignupDialog_text_dark {
color: $primary-fg-color;
color: $primary-content;
}
.mx_HostSignupDialog_text_light {
color: $secondary-fg-color;
color: $secondary-content;
}
.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;
min-width: 40%;
flex: 1 !important;
color: $primary-fg-color !important;
color: $primary-content !important;
}
}
@ -94,7 +94,7 @@ limitations under the License.
}
> span {
color: $primary-fg-color;
color: $primary-content;
}
.mx_InviteDialog_subname {
@ -110,7 +110,7 @@ limitations under the License.
font-size: $font-14px;
> span {
color: $primary-fg-color;
color: $primary-content;
font-weight: 600;
}
@ -220,7 +220,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
margin-left: 7px;
}
@ -352,7 +352,7 @@ limitations under the License.
border-right: 0;
border-radius: 0;
margin-top: 0;
border-color: $quaternary-fg-color;
border-color: $quaternary-content;
input {
font-size: 18px;
@ -418,7 +418,7 @@ limitations under the License.
> h4 {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
color: $secondary-content;
font-weight: normal;
}
@ -432,14 +432,14 @@ limitations under the License.
font-size: $font-15px;
line-height: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
color: $primary-content;
}
.mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px;
font-size: $font-12px;
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-family: $font-family;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
.mx_Dropdown_input {
border: 1px solid $input-border-color;
@ -44,7 +44,7 @@ limitations under the License.
top: 8px;
mask-repeat: no-repeat;
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;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
&::before {
content: '';
@ -72,7 +72,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
@ -81,7 +81,7 @@ limitations under the License.
}
> 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 {
width: 480px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -52,7 +52,7 @@ limitations under the License.
> h3 {
margin: 0;
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
@ -85,7 +85,7 @@ limitations under the License.
margin-top: 8px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
color: $tertiary-content;
}
.mx_Checkbox {
@ -113,7 +113,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
&::before {
content: '';
@ -122,7 +122,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
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;
font-size: $font-14px;
padding: 0;
color: $primary-fg-color;
color: $primary-content;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px;

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

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

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

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

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

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

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

@ -22,7 +22,7 @@ limitations under the License.
margin-bottom: 0;
> p {
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-14px;
margin: 16px 0;
@ -38,7 +38,7 @@ limitations under the License.
> h4 {
font-size: $font-15px;
font-weight: $font-semi-bold;
color: $secondary-fg-color;
color: $secondary-content;
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;
padding: 9px;
color: $input-fg-color;
background-color: $primary-bg-color;
background-color: $background;
font-size: $font-15px;
width: 100%;
max-width: 280px;

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

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

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

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

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

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

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

@ -34,7 +34,7 @@ limitations under the License.
box-sizing: border-box;
border-radius: 4px;
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
overflow-y: auto;
}
@ -153,7 +153,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_NetworkDropdown_handle_server {

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_AddressSelector {
position: absolute;
background-color: $primary-bg-color;
background-color: $background;
width: 485px;
max-height: 116px;
overflow-y: auto;
@ -31,8 +31,8 @@ limitations under the License.
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color;
border: solid 1px $primary-bg-color;
background-color: $background;
border: solid 1px $background;
}
.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);
border: solid 1px $input-border-color;
line-height: $font-26px;
color: $primary-fg-color;
color: $primary-content;
font-size: $font-14px;
font-weight: normal;
margin-right: 4px;

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

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

22
res/css/views/elements/_EventTilePreview.scss Normal file
View file

@ -0,0 +1,22 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_EventTilePreview_loader {
&.mx_IRCLayout,
&.mx_GroupLayout {
padding: 9px 0;
}
}

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

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

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

@ -46,8 +46,8 @@ limitations under the License.
// corners on the field above.
border-radius: 4px;
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
flex: 1;
min-width: 0;
}
@ -67,7 +67,7 @@ limitations under the License.
height: 6px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat;
background-color: $primary-fg-color;
background-color: $primary-content;
z-index: 1;
pointer-events: none;
}
@ -98,14 +98,14 @@ limitations under the License.
transition:
font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s,
transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
color: $primary-content;
background-color: transparent;
font-size: $font-14px;
transform: translateY(0);
position: absolute;
left: 0px;
top: 0px;
margin: 7px 8px;
padding: 2px;
pointer-events: none; // Allow clicks to fall through to the input
@ -124,10 +124,10 @@ limitations under the License.
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
transform 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: $font-10px;
top: -13px;
transform: translateY(-13px);
padding: 0 2px;
background-color: $field-focused-label-bg-color;
pointer-events: initial;

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

@ -18,6 +18,10 @@ $button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
:root {
--image-view-panel-height: 68px;
}
.mx_ImageView {
display: flex;
width: 100%;
@ -36,14 +40,24 @@ $button-gap: 24px;
.mx_ImageView_image {
flex-shrink: 0;
&.mx_ImageView_image_animating {
transition: transform 200ms ease 0s;
}
&.mx_ImageView_image_animatingLoading {
transition: transform 300ms ease 0s;
}
}
.mx_ImageView_panel {
width: 100%;
height: 68px;
height: var(--image-view-panel-height);
display: flex;
justify-content: space-between;
align-items: center;
animation-name: mx_ImageView_panel_keyframes;
animation-duration: 300ms;
}
.mx_ImageView_info_wrapper {
@ -124,3 +138,13 @@ $button-gap: 24px;
mask-size: 40%;
}
}
@media (prefers-reduced-motion) {
.mx_ImageView_image_animating {
transition: none !important;
}
.mx_ImageView_image_animatingLoading {
transition: none !important;
}
}

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

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

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

@ -37,7 +37,7 @@ limitations under the License.
right: -6px;
bottom: -6px;
background-color: $primary-bg-color;
background-color: $background;
border-radius: 50%;
z-index: 1;
@ -45,7 +45,7 @@ limitations under the License.
height: 100%;
width: 100%;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
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 */
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: $primary-fg-color;
color: $primary-content;
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-weight: $font-semi-bold;
border: 1px solid $input-border-color;
color: $primary-fg-color;
color: $primary-content;
> img {
object-fit: contain;

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

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

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

@ -37,7 +37,7 @@ limitations under the License.
}
.mx_Spinner_icon {
background-color: $primary-fg-color;
background-color: $primary-content;
mask: url('$(res)/img/spinner.svg');
mask-size: contain;
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 {
min-width: 70px;
padding: 0; // override from button styles
padding: 0 8px; // override from button styles
margin-left: 16px; // distance from <Field>
}
@ -50,7 +50,7 @@ limitations under the License.
&::before {
content: '';
border-radius: 20px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
opacity: 0.15;
position: absolute;
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
.mx_Field_tooltip {
background-color: $menu-bg-color;
color: $primary-fg-color;
color: $primary-content;
border: 1px solid $menu-border-color;
text-align: unset;

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

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

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

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

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

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

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

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

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

@ -23,7 +23,7 @@ limitations under the License.
height: 32px;
line-height: $font-24px;
border-radius: 8px;
background: $primary-bg-color;
background: $background;
border: 1px solid $input-border-color;
top: -32px;
right: 8px;
@ -77,11 +77,11 @@ limitations under the License.
mask-size: 18px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
.mx_MessageActionBar_maskButton:hover::after {
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_MessageActionBar_reactButton::after {
@ -92,6 +92,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
}
.mx_MessageActionBar_threadButton::after {
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}

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

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReactionsRow {
margin: 6px 0;
color: $primary-fg-color;
color: $primary-content;
.mx_ReactionsRow_addReactionButton {
position: relative;
@ -36,7 +36,7 @@ limitations under the License.
mask-size: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
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 {
&::before {
background-color: $primary-fg-color;
background-color: $primary-content;
}
}
}
@ -64,10 +64,10 @@ limitations under the License.
vertical-align: middle;
&:link, &:visited {
color: $tertiary-fg-color;
color: $tertiary-content;
}
&: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 {
color: $tertiary-fg-color;
color: $tertiary-content;
font-size: $font-12px;
font-weight: 500;
}
@ -145,7 +145,7 @@ limitations under the License.
justify-content: space-around;
.mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color;
color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2);
font-weight: $font-semi-bold;
font-size: $font-14px;

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

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

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

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomSummaryCard_alias {
font-size: $font-13px;
color: $secondary-fg-color;
color: $secondary-content;
}
h2, .mx_RoomSummaryCard_alias {
@ -115,7 +115,7 @@ limitations under the License.
// as we will be applying it in its children
padding: 0;
height: auto;
color: $tertiary-fg-color;
color: $tertiary-content;
.mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
@ -128,7 +128,7 @@ limitations under the License.
}
span {
color: $primary-fg-color;
color: $primary-content;
}
}
@ -232,6 +232,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/files.svg');
}
.mx_RoomSummaryCard_icon_threads::before {
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_RoomSummaryCard_icon_share::before {
mask-image: url('$(res)/img/element-icons/room/share.svg');
}

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

@ -55,7 +55,7 @@ limitations under the License.
}
.mx_UserInfo_separator {
border-bottom: 1px solid rgba($primary-fg-color, .1);
border-bottom: 1px solid rgba($primary-content, .1);
}
.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-size: contain;
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 {
.mx_AppsContainer_resizerHandle::after {
opacity: 0.8;
background: $primary-fg-color;
background: $primary-content;
}
.mx_ResizeHandle_horizontal::before {
@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
content: '';
background-color: $primary-fg-color;
background-color: $primary-content;
opacity: 0.8;
}
}

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

@ -4,27 +4,29 @@
z-index: 1001;
width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
background: $background;
border-bottom: none;
border-radius: 8px 8px 0 0;
max-height: 50vh;
overflow: auto;
overflow: clip;
display: flex;
flex-direction: column;
box-shadow: 0px -16px 32px $composer-shadow-color;
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color;
width: 100%;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
min-height: 34px;
display: flex;
padding: 0 12px;
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
color: $primary-content;
}
.mx_Autocomplete_Completion_block * {
@ -40,7 +42,7 @@
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
color: $primary-content;
}
.mx_Autocomplete_Completion_pill > * {
@ -59,8 +61,9 @@
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
height: 100%;
overflow-y: scroll;
max-height: 35vh;
}
.mx_Autocomplete_Completion_container_truncate {
@ -68,7 +71,6 @@
.mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -83,7 +85,7 @@
.mx_Autocomplete_provider_name {
margin: 12px;
color: $primary-fg-color;
color: $primary-content;
font-weight: 400;
opacity: 0.4;
}

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

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

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

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

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

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

39
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -23,16 +23,24 @@ limitations under the License.
}
.mx_EventTile[data-layout=bubble] {
position: relative;
margin-top: var(--gutterSize);
margin-left: 50px;
margin-left: 49px;
margin-right: 100px;
font-size: $font-14px;
&.mx_EventTile_continuation {
margin-top: 2px;
}
&.mx_EventTile_highlight {
&::before {
background-color: $event-highlight-bg-color;
}
color: $event-highlight-fg-color;
}
/* For replies */
.mx_EventTile {
padding-top: 0;
@ -69,10 +77,11 @@ limitations under the License.
max-width: 70%;
}
.mx_SenderProfile {
> .mx_SenderProfile {
position: relative;
top: -2px;
left: 2px;
font-size: $font-15px;
}
&[data-self=false] {
@ -188,8 +197,6 @@ limitations under the License.
}
.mx_ReplyThread {
margin: 0 calc(-1 * var(--gutterSize));
.mx_EventTile_reply {
max-width: 90%;
padding: 0;
@ -223,11 +230,6 @@ limitations under the License.
margin-left: -9px;
}
.mx_ReplyThread {
border-left-width: 2px;
border-left-color: $eventbubble-reply-color;
}
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
&.mx_EventTile_bad > .mx_EventTile_line {
display: grid;
@ -284,6 +286,8 @@ limitations under the License.
.mx_EventTile_line,
.mx_EventTile_info {
min-width: 100%;
// Preserve alignment with left edge of text in bubbles
margin: 0;
}
.mx_EventTile_e2eIcon {
@ -291,9 +295,10 @@ limitations under the License.
}
.mx_EventTile_line > a {
// Align timestamps with those of normal bubble tiles
right: auto;
top: -15px;
left: -68px;
top: -11px;
left: -95px;
}
}
@ -323,11 +328,10 @@ limitations under the License.
}
.mx_EventTile_line {
margin: 0 5px;
margin: 0;
> a {
left: auto;
right: 0;
transform: translateX(calc(100% + 5px));
// Align timestamps with those of normal bubble tiles
left: -76px;
}
}
@ -337,7 +341,8 @@ limitations under the License.
}
.mx_EventListSummary[data-expanded=false][data-layout=bubble] {
padding: 0 34px;
// Align with left edge of bubble tiles
padding: 0 49px;
}
/* events that do not require bubble layout */

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

@ -55,7 +55,7 @@ $hover-select-border: 4px;
}
.mx_SenderProfile {
color: $primary-fg-color;
color: $primary-content;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
@ -161,7 +161,7 @@ $hover-select-border: 4px;
// up with the other read receipts
&::before {
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
@ -480,7 +480,7 @@ $hover-select-border: 4px;
}
pre code > * {
display: inline-block;
display: inline;
}
pre {
@ -514,7 +514,7 @@ $hover-select-border: 4px;
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
border: 1px solid $tertiary-content;
}
.mx_EventTile_pre_container {
@ -618,7 +618,7 @@ $hover-select-border: 4px;
}
.mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color;
color: $primary-content;
text-decoration: underline;
cursor: pointer;
}
@ -643,6 +643,7 @@ $hover-select-border: 4px;
// Remove some of the default tile padding so that the error is centered
margin-right: 0;
.mx_EventTile_line {
padding-left: 0;
margin-right: 0;
@ -674,3 +675,66 @@ $hover-select-border: 4px;
margin-right: 0;
}
}
.mx_ThreadInfo:hover {
cursor: pointer;
}
.mx_ThreadView {
display: flex;
flex-direction: column;
.mx_ScrollPanel {
margin-top: 20px;
.mx_RoomView_MessageList {
padding: 0;
}
}
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
a {
flex: 1;
min-width: none;
max-width: 100%;
display: flex;
align-items: center;
.mx_SenderProfile {
flex: 1;
}
}
}
.mx_ThreadView_List {
flex: 1;
overflow: scroll;
}
.mx_EventTile_roomName {
display: none;
}
.mx_EventTile_line {
padding-left: 0 !important;
order: 10 !important;
}
.mx_EventTile {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 0;
padding-bottom: 5px;
margin-bottom: 5px;
}
.mx_MessageComposer_sendMessage {
margin-right: 0;
}
}

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

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

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

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

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

@ -130,7 +130,7 @@ limitations under the License.
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
to { background-color: $background; }
}
.mx_MessageComposer_input_error {
@ -160,8 +160,8 @@ limitations under the License.
resize: none;
outline: none;
box-shadow: none;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
max-height: 120px;
overflow: auto;
@ -186,11 +186,14 @@ limitations under the License.
}
.mx_MessageComposer_button {
--size: 26px;
position: relative;
margin-right: 6px;
cursor: pointer;
height: 26px;
width: 26px;
height: var(--size);
line-height: var(--size);
width: auto;
padding-left: calc(var(--size) + 5px);
border-radius: 100%;
&::before {
@ -207,8 +210,22 @@ limitations under the License.
mask-position: center;
}
&:hover {
background: rgba($accent-color, 0.1);
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: var(--size);
height: var(--size);
border-radius: 50%;
}
&:hover,
&.mx_MessageComposer_closeButtonMenu {
&::after {
background: rgba($accent-color, 0.1);
}
&::before {
background-color: $accent-color;
@ -237,10 +254,18 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}
.mx_MessageComposer_buttonMenu::before {
mask-image: url('$(res)/img/image-view/more.svg');
}
.mx_MessageComposer_closeButtonMenu::before {
transform: rotate(90deg);
transform-origin: center;
}
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
margin-right: 6px;
width: 32px;
height: 32px;
border-radius: 100%;
@ -340,3 +365,28 @@ limitations under the License.
height: 50px;
}
}
/**
* Unstable compact mode
*/
.mx_MessageComposer.mx_MessageComposer--compact {
margin-right: 0;
.mx_MessageComposer_wrapper {
padding: 0 0 0 25px;
}
.mx_MessageComposer_button:last-child {
margin-right: 0;
}
.mx_MessageComposer_e2eIcon {
left: 0;
}
}
.mx_MessageComposer_Menu .mx_CallContextMenu_item {
display: flex;
align-items: center;
}

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

@ -67,6 +67,6 @@ limitations under the License.
> p {
margin: 0;
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
&.mx_NotificationBadge_dot {
background-color: $primary-fg-color; // increased visibility
background-color: $primary-content; // increased visibility
width: 6px;
height: 6px;

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

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

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