mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 02:35:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make all 'font-size's and 'line-height's rem

Browse source 
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.

I'm expecting another commit cleaning up rem values but I thought it
best to leave that to review.

This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.
This commit is contained in:
Jorik Schellekens 2020-03-30 18:18:10 +01:00
parent cf4f595f79
commit da34e6241d
91 changed files with 230 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
res/css/_common.scss
View file

@ -16,6 +16,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
:root {
font-size: 15px;
}
html { html {
/* hack to stop overscroll bounce on OSX and iOS. /* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */ N.B. Breaks things when we have legitimate horizontal overscroll */
@ -25,7 +29,7 @@ html {
body { body {
font-family: $font-family; font-family: $font-family;
font-size: 15px; font-size: 1rem;
background-color: $primary-bg-color; background-color: $primary-bg-color;
color: $primary-fg-color; color: $primary-fg-color;
border: 0px; border: 0px;
@ -60,7 +64,7 @@ b {
h2 { h2 {
color: $primary-fg-color; color: $primary-fg-color;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.2rem;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -76,7 +80,7 @@ input[type=search],
input[type=password] { input[type=password] {
padding: 9px; padding: 9px;
font-family: $font-family; font-family: $font-family;
font-size: 14px; font-size: 0.933rem;
font-weight: 600; font-weight: 600;
min-width: 0; min-width: 0;
} }
@ -253,7 +257,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $light-fg-color; color: $light-fg-color;
z-index: 4012; z-index: 4012;
font-weight: 300; font-weight: 300;
font-size: 15px; font-size: 1rem;
position: relative; position: relative;
padding: 25px 30px 30px 30px; padding: 25px 30px 30px 30px;
max-height: 80%; max-height: 80%;
@ -321,8 +325,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_title { .mx_Dialog_title {
font-size: 22px; font-size: 1.467rem;
line-height: 36px; line-height: 2.400rem;
color: $dialog-title-fg-color; color: $dialog-title-fg-color;
} }
@ -350,7 +354,7 @@ 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: 14px; font-size: 0.933rem;
color: $primary-fg-color; color: $primary-fg-color;
word-wrap: break-word; word-wrap: break-word;
} }
@ -446,7 +450,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_TextInputDialog_input { .mx_TextInputDialog_input {
font-size: 15px; font-size: 1rem;
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;

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

@ -36,7 +36,7 @@ limitations under the License.
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-fg-color;
position: absolute; position: absolute;
font-size: 14px; font-size: 0.933rem;
z-index: 5001; z-index: 5001;
} }

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

@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
border: 1px solid $strong-input-border-color; border: 1px solid $strong-input-border-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 0.867rem;
padding: 9px; padding: 9px;
margin-top: 6px; margin-top: 6px;
} }

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

@ -49,7 +49,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MFileBody_download { .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
display: flex; display: flex;
font-size: 14px; font-size: 0.933rem;
color: $event-timestamp-color; color: $event-timestamp-color;
} }
@ -60,7 +60,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size { .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0; flex: 1 0 0;
font-size: 11px; font-size: 0.733rem;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
@ -80,7 +80,7 @@ limitations under the License.
flex: 1 1 auto; flex: 1 1 auto;
line-height: initial; line-height: initial;
padding: 0px; padding: 0px;
font-size: 11px; font-size: 0.733rem;
opacity: 1.0; opacity: 1.0;
color: $event-timestamp-color; color: $event-timestamp-color;
} }
@ -90,7 +90,7 @@ limitations under the License.
text-align: right; text-align: right;
visibility: visible; visibility: visible;
position: initial; position: initial;
font-size: 11px; font-size: 0.733rem;
opacity: 1.0; opacity: 1.0;
color: $event-timestamp-color; color: $event-timestamp-color;
} }

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

@ -134,7 +134,7 @@ limitations under the License.
overflow: hidden; overflow: hidden;
color: $primary-fg-color; color: $primary-fg-color;
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 1.467rem;
padding-left: 19px; padding-left: 19px;
padding-right: 16px; padding-right: 16px;
/* why isn't text-overflow working? */ /* why isn't text-overflow working? */
@ -148,7 +148,7 @@ limitations under the License.
max-height: 42px; max-height: 42px;
color: $settings-grey-fg-color; color: $settings-grey-fg-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 0.867rem;
padding-left: 19px; padding-left: 19px;
margin-right: 16px; margin-right: 16px;
overflow: hidden; overflow: hidden;
@ -196,7 +196,7 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 0.867rem;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -226,7 +226,7 @@ limitations under the License.
.mx_GroupView_rooms_header_addRow_label { .mx_GroupView_rooms_header_addRow_label {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
line-height: 24px; line-height: 1.600rem;
padding-left: 28px; padding-left: 28px;
color: $accent-color; color: $accent-color;
} }
@ -258,7 +258,7 @@ limitations under the License.
.mx_GroupView_membershipSection_description { .mx_GroupView_membershipSection_description {
/* To match textButton */ /* To match textButton */
line-height: 34px; line-height: 2.267rem;
} }
.mx_GroupView_membershipSection_description .mx_BaseAvatar { .mx_GroupView_membershipSection_description .mx_BaseAvatar {

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

@ -147,7 +147,7 @@ limitations under the License.
} }
.mx_AccessibleButton { .mx_AccessibleButton {
font-size: 14px; font-size: 0.933rem;
margin: 4px 0 1px 9px; margin: 4px 0 1px 9px;
padding: 9px; padding: 9px;
padding-left: 42px; padding-left: 42px;

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

@ -105,7 +105,7 @@ limitations under the License.
.mx_MyGroups_placeholder { .mx_MyGroups_placeholder {
background-color: $info-plinth-bg-color; background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color; color: $info-plinth-fg-color;
line-height: 400px; line-height: 26.667rem;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
} }
@ -149,11 +149,11 @@ limitations under the License.
.mx_GroupTile_profile .mx_GroupTile_name { .mx_GroupTile_profile .mx_GroupTile_name {
margin: 0px; margin: 0px;
font-size: 15px; font-size: 1rem;
} }
.mx_GroupTile_profile .mx_GroupTile_groupId { .mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 13px; font-size: 0.867rem;
opacity: 0.7; opacity: 0.7;
} }
@ -161,7 +161,7 @@ limitations under the License.
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 13px; font-size: 0.867rem;
max-height: 36px; max-height: 36px;
overflow: hidden; overflow: hidden;
} }

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

@ -39,7 +39,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_roomName { .mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 0.933rem;
} }
.mx_NotificationPanel .mx_EventTile_roomName a { .mx_NotificationPanel .mx_EventTile_roomName a {
@ -54,7 +54,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-fg-color;
font-size: 12px; font-size: 0.8rem;
display: inline; display: inline;
padding-left: 0px; padding-left: 0px;
} }

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

@ -96,7 +96,7 @@ limitations under the License.
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {
font-size: 8px; font-size: 0.533rem;
border-radius: 8px; border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
background-color: $accent-color; background-color: $accent-color;

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

@ -64,7 +64,7 @@ limitations under the License.
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
font-size: 12px; font-size: 0.8rem;
color: $primary-fg-color; color: $primary-fg-color;
width: 100%; width: 100%;
text-align: left; text-align: left;
@ -112,7 +112,7 @@ limitations under the License.
.mx_RoomDirectory_name { .mx_RoomDirectory_name {
display: inline-block; display: inline-block;
font-size: 18px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }
@ -124,7 +124,7 @@ limitations under the License.
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
height: 20px; height: 20px;
line-height: 20px; line-height: 1.333rem;
padding: 0 5px; padding: 0 5px;
color: $accent-fg-color; color: $accent-fg-color;
background-color: $rte-room-pill-color; background-color: $rte-room-pill-color;
@ -136,7 +136,7 @@ limitations under the License.
} }
.mx_RoomDirectory_alias { .mx_RoomDirectory_alias {
font-size: 12px; font-size: 0.8rem;
color: $settings-grey-fg-color; color: $settings-grey-fg-color;
} }
@ -150,7 +150,7 @@ limitations under the License.
} }
.mx_RoomDirectory > span { .mx_RoomDirectory > span {
font-size: 15px; font-size: 1rem;
margin-top: 0; margin-top: 0;
.mx_AccessibleButton { .mx_AccessibleButton {

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

@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar { .mx_RoomStatusBar_callBar {
height: 50px; height: 50px;
line-height: 50px; line-height: 3.333rem;
} }
.mx_RoomStatusBar_placeholderIndicator span { .mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px; border-radius: 40px;
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 24px; line-height: 1.600rem;
font-size: 0.8em; font-size: 0.8em;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc { .mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color; color: $primary-fg-color;
font-size: 13px; font-size: 0.867rem;
opacity: 0.5; opacity: 0.5;
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar { .mx_RoomStatusBar_typingBar {
height: 50px; height: 50px;
line-height: 50px; line-height: 3.333rem;
color: $primary-fg-color; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone { .mx_RoomStatusBar_isAlone {
height: 50px; height: 50px;
line-height: 50px; line-height: 3.333rem;
color: $primary-fg-color; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar { .mx_RoomStatusBar_callBar {
height: 40px; height: 40px;
line-height: 40px; line-height: 2.667rem;
} }
.mx_RoomStatusBar_typingBar { .mx_RoomStatusBar_typingBar {
height: 40px; height: 40px;
line-height: 40px; line-height: 2.667rem;
} }
} }

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

@ -68,7 +68,7 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $roomsublist-label-fg-color; color: $roomsublist-label-fg-color;
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 0.8rem;
margin-left: 8px; margin-left: 8px;
} }
@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 0.8rem;
padding: 0 5px; padding: 0 5px;
color: $roomtile-badge-fg-color; color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color; background-color: $roomtile-name-color;

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

@ -23,7 +23,7 @@ limitations under the License.
.mx_RoomView_fileDropTarget { .mx_RoomView_fileDropTarget {
min-width: 0px; min-width: 0px;
width: 100%; width: 100%;
font-size: 18px; font-size: 1.2rem;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty { .mx_RoomView_empty {
flex: 1 1 auto; flex: 1 1 auto;
font-size: 13px; font-size: 0.867rem;
padding-left: 3em; padding-left: 3em;
padding-right: 3em; padding-right: 3em;
margin-right: 20px; margin-right: 20px;

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

@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
font-size: 14px; font-size: 0.933rem;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px; margin-bottom: 6px;
position: relative; position: relative;

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

@ -139,7 +139,7 @@ limitations under the License.
background-color: $neutral-badge-color; background-color: $neutral-badge-color;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 0.667rem;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-left: 4px; padding-left: 4px;
@ -157,7 +157,7 @@ limitations under the License.
border-radius: 8px; border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 0.933rem;
padding: 0 5px; padding: 0 5px;
background-color: $roomtile-name-color; background-color: $roomtile-name-color;
} }

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

@ -77,7 +77,7 @@ limitations under the License.
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 1; grid-row: 1;
margin: 0; margin: 0;
font-size: 15px; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
@ -96,11 +96,11 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 4px 0 11px 0; margin: 4px 0 11px 0;
font-size: 12px; font-size: 0.8rem;
} }
.mx_Toast_deviceID { .mx_Toast_deviceID {
font-size: 10px; font-size: 0.667rem;
} }
} }
} }

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

@ -32,7 +32,7 @@ limitations under the License.
.mx_TopLeftMenuButton_name { .mx_TopLeftMenuButton_name {
margin: 0 7px; margin: 0 7px;
font-size: 18px; font-size: 1.2rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

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

@ -29,7 +29,7 @@ limitations under the License.
.mx_ViewSource pre { .mx_ViewSource pre {
text-align: left; text-align: left;
font-size: 12px; font-size: 0.8rem;
padding: 0.5em 1em 0.5em 1em; padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;

2
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
} }
.mx_CompleteSecurity_body { .mx_CompleteSecurity_body {
font-size: 15px; font-size: 1rem;
} }
.mx_CompleteSecurity_waiting { .mx_CompleteSecurity_waiting {

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthBody { .mx_AuthBody {
width: 500px; width: 500px;
font-size: 12px; font-size: 0.8rem;
color: $authpage-secondary-color; color: $authpage-secondary-color;
background-color: $authpage-body-bg-color; background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
@ -25,14 +25,14 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
h2 { h2 {
font-size: 24px; font-size: 1.600rem;
font-weight: 600; font-weight: 600;
margin-top: 8px; margin-top: 8px;
color: $authpage-primary-color; color: $authpage-primary-color;
} }
h3 { h3 {
font-size: 14px; font-size: 0.933rem;
font-weight: 600; font-weight: 600;
color: $authpage-primary-color; color: $authpage-primary-color;
} }
@ -98,7 +98,7 @@ limitations under the License.
.mx_AuthBody_editServerDetails { .mx_AuthBody_editServerDetails {
padding-left: 1em; padding-left: 1em;
font-size: 12px; font-size: 0.8rem;
font-weight: normal; font-weight: normal;
} }

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

@ -43,7 +43,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 1rem;
padding: 0 11px; padding: 0 11px;
word-break: break-word; word-break: break-word;
} }

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter { .mx_AuthFooter {
text-align: center; text-align: center;
width: 100%; width: 100%;
font-size: 14px; font-size: 0.933rem;
opacity: 0.72; opacity: 0.72;
padding: 20px 0; padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

4
res/css/views/auth/_CompleteSecurityBody.scss
View file

@ -24,13 +24,13 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
h2 { h2 {
font-size: 24px; font-size: 1.600rem;
font-weight: 600; font-weight: 600;
margin-top: 0; margin-top: 0;
} }
h3 { h3 {
font-size: 14px; font-size: 0.933rem;
font-weight: 600; font-weight: 600;
} }

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

@ -20,7 +20,7 @@ limitations under the License.
.mx_AuthBody_language .mx_Dropdown_input { .mx_AuthBody_language .mx_Dropdown_input {
border: none; border: none;
font-size: 14px; font-size: 0.933rem;
font-weight: 600; font-weight: 600;
color: $authpage-lang-color; color: $authpage-lang-color;
} }

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

@ -65,5 +65,5 @@ limitations under the License.
} }
.mx_ServerTypeSelector_description { .mx_ServerTypeSelector_description {
font-size: 10px; font-size: 0.667rem;
} }

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

@ -38,7 +38,7 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 16px; line-height: 1.067rem;
} }
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet { .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {

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

@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_StatusMessageContextMenu_clear { .mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton; @mixin mx_DialogButton;
align-self: start; align-self: start;
font-size: 12px; font-size: 0.8rem;
padding: 6px 1em; padding: 6px 1em;
border: 1px solid transparent; border: 1px solid transparent;
margin-right: 10px; margin-right: 10px;

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

@ -22,7 +22,7 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 16px; line-height: 1.067rem;
} }
.mx_TagTileContextMenu_item object { .mx_TagTileContextMenu_item object {

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

@ -19,12 +19,12 @@ limitations under the License.
border-radius: 4px; border-radius: 4px;
.mx_TopLeftMenu_greyedText { .mx_TopLeftMenu_greyedText {
font-size: 12px; font-size: 0.8rem;
opacity: 0.5; opacity: 0.5;
} }
.mx_TopLeftMenu_upgradeLink { .mx_TopLeftMenu_upgradeLink {
font-size: 12px; font-size: 0.8rem;
img { img {
margin-left: 5px; margin-left: 5px;

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

@ -28,7 +28,7 @@ limitations under the License.
.mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus { .mx_AddressPickerDialog_input:focus {
height: 26px; height: 26px;
font-size: 14px; font-size: 0.933rem;
font-family: $font-family; font-family: $font-family;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
@ -50,7 +50,7 @@ limitations under the License.
.mx_AddressPickerDialog_inputContainer { .mx_AddressPickerDialog_inputContainer {
border-radius: 3px; border-radius: 3px;
border: solid 1px $input-border-color; border: solid 1px $input-border-color;
line-height: 36px; line-height: 2.400rem;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-top: 1px; padding-top: 1px;

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

@ -26,22 +26,22 @@ limitations under the License.
} }
.mx_ConfirmUserActionDialog_name { .mx_ConfirmUserActionDialog_name {
font-size: 18px; font-size: 1.2rem;
} }
.mx_ConfirmUserActionDialog_userId { .mx_ConfirmUserActionDialog_userId {
font-size: 13px; font-size: 0.867rem;
} }
.mx_ConfirmUserActionDialog_reasonField { .mx_ConfirmUserActionDialog_reasonField {
font-family: $font-family; font-family: $font-family;
font-size: 14px; font-size: 0.933rem;
color: $primary-fg-color; color: $primary-fg-color;
background-color: $primary-bg-color; background-color: $primary-bg-color;
border-radius: 3px; border-radius: 3px;
border: solid 1px $input-border-color; border: solid 1px $input-border-color;
line-height: 36px; line-height: 2.400rem;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
padding-top: 1px; padding-top: 1px;

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

@ -25,7 +25,7 @@ limitations under the License.
} }
.mx_CreateGroupDialog_input { .mx_CreateGroupDialog_input {
font-size: 15px; font-size: 1rem;
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
@ -44,7 +44,7 @@ limitations under the License.
.mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix { .mx_CreateGroupDialog_suffix {
padding: 0px 5px; padding: 0px 5px;
line-height: 37px; line-height: 2.467rem;
background-color: $input-darker-bg-color; background-color: $input-darker-bg-color;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
text-align: center; text-align: center;

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

@ -49,7 +49,7 @@ limitations under the License.
} }
.mx_CreateRoomDialog_input { .mx_CreateRoomDialog_input {
font-size: 15px; font-size: 1rem;
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;

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

@ -68,11 +68,11 @@ limitations under the License.
width: 240px; width: 240px;
color: $input-fg-color; color: $input-fg-color;
font-family: $font-family; font-family: $font-family;
font-size: 16px; font-size: 1.067rem;
} }
.mx_DevTools_textarea { .mx_DevTools_textarea {
font-size: 12px; font-size: 0.8rem;
max-width: 684px; max-width: 684px;
min-height: 250px; min-height: 250px;
padding: 10px; padding: 10px;

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

@ -40,8 +40,8 @@ limitations under the License.
textarea, textarea,
textarea:focus { textarea:focus {
height: 34px; height: 34px;
line-height: 34px; line-height: 2.267rem;
font-size: 14px; font-size: 0.933rem;
padding-left: 12px; padding-left: 12px;
margin: 0 !important; margin: 0 !important;
border: 0 !important; border: 0 !important;
@ -65,7 +65,7 @@ limitations under the License.
min-width: 48px; min-width: 48px;
margin-left: 10px; margin-left: 10px;
height: 25px; height: 25px;
line-height: 25px; line-height: 1.667rem;
} }
.mx_InviteDialog_buttonAndSpinner { .mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
padding-bottom: 10px; padding-bottom: 10px;
h3 { h3 {
font-size: 12px; font-size: 0.8rem;
color: $muted-fg-color; color: $muted-fg-color;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@ -143,23 +143,23 @@ limitations under the License.
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 0.933rem;
color: $primary-fg-color; color: $primary-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_InviteDialog_roomTile_userId { .mx_InviteDialog_roomTile_userId {
font-size: 12px; font-size: 0.8rem;
color: $muted-fg-color; color: $muted-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_InviteDialog_roomTile_time { .mx_InviteDialog_roomTile_time {
text-align: right; text-align: right;
font-size: 12px; font-size: 0.8rem;
color: $muted-fg-color; color: $muted-fg-color;
float: right; float: right;
line-height: 36px; // Height of the avatar to keep the time vertically aligned line-height: 2.400rem; // Height of the avatar to keep the time vertically aligned
} }
.mx_InviteDialog_roomTile_highlight { .mx_InviteDialog_roomTile_highlight {
@ -176,7 +176,7 @@ limitations under the License.
border-radius: 12px; border-radius: 12px;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
line-height: 24px; line-height: 1.600rem;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
color: #ffffff; // this is fine without a var because it's for both themes color: #ffffff; // this is fine without a var because it's for both themes

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

@ -35,7 +35,7 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits { .mx_MessageEditHistoryDialog_edits {
list-style-type: none; list-style-type: none;
font-size: 14px; font-size: 0.933rem;
padding: 0; padding: 0;
color: $primary-fg-color; color: $primary-fg-color;
@ -60,7 +60,7 @@ limitations under the License.
} }
.mx_MessageActionBar .mx_AccessibleButton { .mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px; font-size: 0.667rem;
padding: 0 8px; padding: 0 8px;
} }
} }

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

@ -32,6 +32,6 @@ limitations under the License.
} }
.mx_NewSessionReviewDialog_deviceID { .mx_NewSessionReviewDialog_deviceID {
font-size: 12px; font-size: 0.8rem;
color: $notice-secondary-color; color: $notice-secondary-color;
} }

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

@ -20,7 +20,7 @@ limitations under the License.
padding: 9px; padding: 9px;
color: $input-fg-color; color: $input-fg-color;
background-color: $primary-bg-color; background-color: $primary-bg-color;
font-size: 15px; font-size: 1rem;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
margin-bottom: 10px; margin-bottom: 10px;

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

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

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

@ -20,7 +20,7 @@ limitations under the License.
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-fg-color;
background-color: $primary-bg-color; background-color: $primary-bg-color;
font-size: 15px; font-size: 1rem;
max-width: 280px; max-width: 280px;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

@ -31,7 +31,7 @@ limitations under the License.
} }
.mx_TermsDialog_termsTable { .mx_TermsDialog_termsTable {
font-size: 12px; font-size: 0.8rem;
width: 100%; width: 100%;
} }

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

@ -27,7 +27,7 @@ limitations under the License.
// userid // userid
.mx_UnknownDeviceDialog p { .mx_UnknownDeviceDialog p {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 1.067rem;
} }
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons { .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {

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

@ -47,9 +47,9 @@ limitations under the License.
.mx_NetworkDropdown_server_title { .mx_NetworkDropdown_server_title {
padding: 0 10px; padding: 0 10px;
font-size: 15px; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 1.333rem;
margin-bottom: 4px; margin-bottom: 4px;
// remove server button // remove server button
@ -77,16 +77,16 @@ limitations under the License.
.mx_NetworkDropdown_server_subtitle { .mx_NetworkDropdown_server_subtitle {
padding: 0 10px; padding: 0 10px;
font-size: 10px; font-size: 0.667rem;
line-height: 14px; line-height: 0.933rem;
margin-top: -4px; margin-top: -4px;
margin-bottom: 4px; margin-bottom: 4px;
color: $muted-fg-color; color: $muted-fg-color;
} }
.mx_NetworkDropdown_server_network { .mx_NetworkDropdown_server_network {
font-size: 12px; font-size: 0.8rem;
line-height: 16px; line-height: 1.067rem;
padding: 4px 10px; padding: 4px 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -154,7 +154,7 @@ limitations under the License.
.mx_NetworkDropdown_handle_server { .mx_NetworkDropdown_handle_server {
color: $muted-fg-color; color: $muted-fg-color;
font-size: 12px; font-size: 0.8rem;
} }
} }

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

@ -27,7 +27,7 @@ limitations under the License.
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 0.933rem;
} }
.mx_AccessibleButton_kind_primary { .mx_AccessibleButton_kind_primary {

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

@ -19,9 +19,9 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
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: 26px; line-height: 1.733rem;
color: $primary-fg-color; color: $primary-fg-color;
font-size: 14px; font-size: 0.933rem;
font-weight: normal; font-weight: normal;
margin-right: 4px; margin-right: 4px;
} }

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

@ -32,7 +32,7 @@ limitations under the License.
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: 18px; text-indent: 18px;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 0.8rem;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }

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

@ -29,7 +29,7 @@ limitations under the License.
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid $strong-input-border-color; border: 1px solid $strong-input-border-color;
font-size: 12px; font-size: 0.8rem;
user-select: none; user-select: none;
} }
@ -53,7 +53,7 @@ limitations under the License.
.mx_Dropdown_option { .mx_Dropdown_option {
height: 35px; height: 35px;
line-height: 35px; line-height: 2.333rem;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }

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

@ -19,7 +19,7 @@ limitations under the License.
} }
.mx_TextualEvent.mx_EventListSummary_summary { .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 14px; font-size: 0.933rem;
display: inline-flex; display: inline-flex;
} }
@ -27,7 +27,7 @@ limitations under the License.
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
padding-top: 8px; padding-top: 8px;
line-height: 12px; line-height: 0.8rem;
} }
.mx_EventListSummary_avatars .mx_BaseAvatar { .mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line { .mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px; margin-left: 63px;
line-height: 30px; line-height: 2.000rem;
} }
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_EventListSummary { .mx_EventListSummary {
font-size: 13px; font-size: 0.867rem;
.mx_EventTile_line { .mx_EventTile_line {
line-height: 20px; line-height: 1.333rem;
} }
} }
.mx_EventListSummary_line { .mx_EventListSummary_line {
line-height: 22px; line-height: 1.467rem;
} }
.mx_EventListSummary_toggle { .mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
} }
.mx_TextualEvent.mx_EventListSummary_summary { .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 13px; font-size: 0.867rem;
} }
} }

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

@ -40,7 +40,7 @@ limitations under the License.
.mx_Field textarea { .mx_Field textarea {
font-weight: normal; font-weight: normal;
font-family: $font-family; font-family: $font-family;
font-size: 14px; font-size: 0.933rem;
border: none; border: none;
// Even without a border here, we still need this avoid overlapping the rounded // Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above. // corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s; background-color 0.25s ease-out 0.1s;
color: $primary-fg-color; color: $primary-fg-color;
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 0.933rem;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s; background-color 0.25s ease-out 0s;
font-size: 10px; font-size: 0.667rem;
top: -13px; top: -13px;
padding: 0 2px; padding: 0 2px;
background-color: $field-focused-label-bg-color; background-color: $field-focused-label-bg-color;

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

@ -15,9 +15,9 @@ limitations under the License.
*/ */
.mx_FormButton { .mx_FormButton {
line-height: 16px; line-height: 1.067rem;
padding: 5px 15px; padding: 5px 15px;
font-size: 12px; font-size: 0.8rem;
height: min-content; height: min-content;
&:not(:last-child) { &:not(:last-child) {

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

@ -102,13 +102,13 @@ limitations under the License.
} }
.mx_ImageView_name { .mx_ImageView_name {
font-size: 18px; font-size: 1.2rem;
margin-bottom: 6px; margin-bottom: 6px;
word-wrap: break-word; word-wrap: break-word;
} }
.mx_ImageView_metadata { .mx_ImageView_metadata {
font-size: 15px; font-size: 1rem;
opacity: 0.5; opacity: 0.5;
} }
@ -118,13 +118,13 @@ limitations under the License.
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 5px; border-radius: 5px;
background-color: $lightbox-bg-color; background-color: $lightbox-bg-color;
font-size: 14px; font-size: 0.933rem;
padding: 9px; padding: 9px;
border: 1px solid $lightbox-border-color; border: 1px solid $lightbox-border-color;
} }
.mx_ImageView_size { .mx_ImageView_size {
font-size: 11px; font-size: 0.733rem;
} }
.mx_ImageView_link { .mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
} }
.mx_ImageView_button { .mx_ImageView_button {
font-size: 15px; font-size: 1rem;
opacity: 0.5; opacity: 0.5;
margin-top: 18px; margin-top: 18px;
cursor: pointer; cursor: pointer;

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

@ -24,7 +24,7 @@ limitations under the License.
background-color: $interactive-tooltip-bg-color; background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color; color: $interactive-tooltip-fg-color;
position: absolute; position: absolute;
font-size: 10px; font-size: 0.667rem;
font-weight: 600; font-weight: 600;
padding: 6px; padding: 6px;
z-index: 5001; z-index: 5001;

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

@ -9,7 +9,7 @@
border-radius: 16px; border-radius: 16px;
display: inline-block; display: inline-block;
height: 20px; height: 20px;
line-height: 20px; line-height: 1.333rem;
padding-left: 5px; padding-left: 5px;
} }

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

@ -58,8 +58,8 @@ limitations under the License.
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px; padding: 10px;
pointer-events: none; pointer-events: none;
line-height: 14px; line-height: 0.933rem;
font-size: 12px; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: $primary-fg-color; color: $primary-fg-color;
max-width: 200px; max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
text-align: center; text-align: center;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
font-size: 14px; font-size: 0.933rem;
line-height: 1.2; line-height: 1.2;
padding: 6px 8px; padding: 6px 8px;

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

@ -28,7 +28,7 @@ limitations under the License.
transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in;
opacity: 0.6; opacity: 0.6;
line-height: 11px; line-height: 0.733rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -47,6 +47,6 @@ limitations under the License.
.mx_TooltipButton_helpText { .mx_TooltipButton_helpText {
width: 400px; width: 400px;
text-align: start; text-align: start;
line-height: 17px !important; line-height: 1.133rem !important;
} }

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

@ -163,7 +163,7 @@ limitations under the License.
.mx_EmojiPicker_item { .mx_EmojiPicker_item {
display: inline-block; display: inline-block;
font-size: 20px; font-size: 1.333rem;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -183,7 +183,7 @@ limitations under the License.
} }
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
font-size: 16px; font-size: 1.067rem;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
@ -197,7 +197,7 @@ limitations under the License.
} }
.mx_EmojiPicker_preview_emoji { .mx_EmojiPicker_preview_emoji {
font-size: 32px; font-size: 2.133rem;
padding: 8px 16px; padding: 8px 16px;
} }
@ -212,7 +212,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode { .mx_EmojiPicker_shortcode {
color: $light-fg-color; color: $light-fg-color;
font-size: 14px; font-size: 0.933rem;
&::before, &::after { &::before, &::after {
content: ":"; content: ":";

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

@ -19,7 +19,7 @@ limitations under the License.
margin: 4px 0; margin: 4px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 0.933rem;
color: $roomtopic-color; color: $roomtopic-color;
} }

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

@ -21,7 +21,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 24px; height: 24px;
line-height: 24px; line-height: 1.600rem;
border-radius: 4px; border-radius: 4px;
background: $message-action-bar-bg-color; background: $message-action-bar-bg-color;
top: -18px; top: -18px;

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

@ -16,5 +16,5 @@ limitations under the License.
.mx_MessageTimestamp { .mx_MessageTimestamp {
color: $event-timestamp-color; color: $event-timestamp-color;
font-size: 10px; font-size: 0.667rem;
} }

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

@ -21,7 +21,7 @@ limitations under the License.
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {
text-decoration: none; text-decoration: none;
font-size: 10px; font-size: 0.667rem;
font-weight: 600; font-weight: 600;
margin-left: 6px; margin-left: 6px;
vertical-align: top; vertical-align: top;

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_ReactionsRowButton { .mx_ReactionsRowButton {
display: inline-flex; display: inline-flex;
height: 20px; height: 20px;
line-height: 21px; line-height: 1.400rem;
margin-right: 6px; margin-right: 6px;
padding: 0 6px; padding: 0 6px;
border: 1px solid $reaction-row-button-border-color; border: 1px solid $reaction-row-button-border-color;

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_EventTile_content.mx_ViewSourceEvent { .mx_EventTile_content.mx_ViewSourceEvent {
display: flex; display: flex;
opacity: 0.6; opacity: 0.6;
font-size: 12px; font-size: 0.8rem;
pre, code { pre, code {
flex: 1; flex: 1;

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

@ -45,7 +45,7 @@ limitations under the License.
.mx_cryptoEvent_title { .mx_cryptoEvent_title {
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 1rem;
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
} }
@ -56,7 +56,7 @@ limitations under the License.
} }
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle { .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
font-size: 12px; font-size: 0.8rem;
} }
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons { .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {

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

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
font-size: 12px; font-size: 0.8rem;
.mx_UserInfo_cancel { .mx_UserInfo_cancel {
cursor: pointer; cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
} }
h2 { h2 {
font-size: 18px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
margin: 18px 0 0 0; margin: 18px 0 0 0;
} }
@ -109,7 +109,7 @@ limitations under the License.
justify-content: center; justify-content: center;
// override the calculated sizes so that the letter isn't HUGE // override the calculated sizes so that the letter isn't HUGE
font-size: 56px !important; font-size: 3.733rem !important;
width: 100% !important; width: 100% !important;
transition: font-size 0.5s; transition: font-size 0.5s;
} }
@ -122,7 +122,7 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $notice-secondary-color; color: $notice-secondary-color;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 0.8rem;
margin: 4px 0; margin: 4px 0;
} }
@ -134,8 +134,8 @@ limitations under the License.
text-align: center; text-align: center;
h2 { h2 {
font-size: 18px; font-size: 1.2rem;
line-height: 25px; line-height: 1.667rem;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -197,7 +197,7 @@ limitations under the License.
.mx_UserInfo_field { .mx_UserInfo_field {
cursor: pointer; cursor: pointer;
color: $accent-color; color: $accent-color;
line-height: 16px; line-height: 1.067rem;
margin: 8px 0; margin: 8px 0;
&.mx_UserInfo_destructive { &.mx_UserInfo_destructive {
@ -206,7 +206,7 @@ limitations under the License.
} }
.mx_UserInfo_statusMessage { .mx_UserInfo_statusMessage {
font-size: 11px; font-size: 0.733rem;
opacity: 0.5; opacity: 0.5;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -282,6 +282,6 @@ limitations under the License.
} }
.mx_UserInfo_avatar .mx_BaseAvatar_initial { .mx_UserInfo_avatar .mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller font-size: 2.667rem !important; // override the other override because here the avatar is smaller
} }
} }

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

@ -95,7 +95,7 @@ limitations under the License.
} }
.mx_VerificationPanel_QRPhase_helpText { .mx_VerificationPanel_QRPhase_helpText {
font-size: 14px; font-size: 0.933rem;
margin-top: 71px; margin-top: 71px;
text-align: center; text-align: center;
} }

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

@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 0; padding: 0;
margin: 5px auto 5px auto; margin: 5px auto 5px auto;
color: $accent-color; color: $accent-color;
font-size: 12px; font-size: 0.8rem;
} }
.mx_AddWidget_button_full_width { .mx_AddWidget_button_full_width {
@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 9px; padding: 9px;
color: $primary-hairline-color; color: $primary-hairline-color;
background-color: $primary-bg-color; background-color: $primary-bg-color;
font-size: 15px; font-size: 1rem;
} }
.mx_AppTile { .mx_AppTile {
@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTileMenuBar { .mx_AppTileMenuBar {
margin: 0; margin: 0;
font-size: 12px; font-size: 0.8rem;
background-color: $widget-menu-bar-bg-color; background-color: $widget-menu-bar-bg-color;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 16px; font-size: 1.067rem;
} }
.mx_AppPermissionWarning_row { .mx_AppPermissionWarning_row {
@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
} }
.mx_AppPermissionWarning_smallText { .mx_AppPermissionWarning_smallText {
font-size: 12px; font-size: 0.8rem;
} }
.mx_AppPermissionWarning_bolder { .mx_AppPermissionWarning_bolder {

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

@ -63,8 +63,8 @@ limitations under the License.
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
line-height: 16px; line-height: 1.067rem;
font-size: 10.4px; font-size: 0.667rem;
} }
} }
} }

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

@ -78,7 +78,7 @@ limitations under the License.
.mx_GroupRoomTile_name { .mx_GroupRoomTile_name {
flex: 1 1 0; flex: 1 1 0;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 0.933rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@ -116,7 +116,7 @@ limitations under the License.
} }
.mx_EntityTile_subtext { .mx_EntityTile_subtext {
font-size: 11px; font-size: 0.733rem;
opacity: 0.5; opacity: 0.5;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -125,7 +125,7 @@ limitations under the License.
.mx_EntityTile_power { .mx_EntityTile_power {
padding-inline-start: 6px; padding-inline-start: 6px;
font-size: 10px; font-size: 0.667rem;
color: $notice-secondary-color; color: $notice-secondary-color;
max-width: 6em; max-width: 6em;
overflow: hidden; overflow: hidden;

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

@ -19,7 +19,7 @@ limitations under the License.
max-width: 100%; max-width: 100%;
clear: both; clear: both;
padding-top: 18px; padding-top: 18px;
font-size: 14px; font-size: 0.933rem;
position: relative; position: relative;
} }
@ -64,7 +64,7 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile { .mx_EventTile .mx_SenderProfile {
color: $primary-fg-color; color: $primary-fg-color;
font-size: 14px; font-size: 0.933rem;
display: inline-block; /* anti-zalgo, with overflow hidden */ display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@ -72,7 +72,7 @@ limitations under the License.
padding-bottom: 0px; padding-bottom: 0px;
padding-top: 0px; padding-top: 0px;
margin: 0px; margin: 0px;
line-height: 17px; line-height: 1.133rem;
/* the next three lines, along with overflow hidden, truncate long display names */ /* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -117,7 +117,7 @@ limitations under the License.
padding-bottom: 2px; padding-bottom: 2px;
border-radius: 4px; border-radius: 4px;
min-height: 24px; min-height: 24px;
line-height: 22px; line-height: 1.467rem;
} }
.mx_RoomView_timeline_rr_enabled { .mx_RoomView_timeline_rr_enabled {
@ -152,8 +152,8 @@ limitations under the License.
/* HACK to override line-height which is already marked important elsewhere */ /* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important; font-size: 3.200rem !important;
line-height: 57px !important; line-height: 3.800rem !important;
} }
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { .mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
@ -312,7 +312,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_readAvatarRemainder { .mx_EventTile_readAvatarRemainder {
color: $event-timestamp-color; color: $event-timestamp-color;
font-size: 11px; font-size: 0.733rem;
position: absolute; position: absolute;
} }
@ -341,7 +341,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_spoiler_reason { .mx_EventTile_spoiler_reason {
color: $event-timestamp-color; color: $event-timestamp-color;
font-size: 11px; font-size: 0.733rem;
} }
.mx_EventTile_spoiler_content { .mx_EventTile_spoiler_content {
@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
} }
.mx_EventTile_keyRequestInfo { .mx_EventTile_keyRequestInfo {
font-size: 12px; font-size: 0.8rem;
} }
.mx_EventTile_keyRequestInfo_text { .mx_EventTile_keyRequestInfo_text {
@ -471,7 +471,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_content .mx_EventTile_edited { .mx_EventTile_content .mx_EventTile_edited {
user-select: none; user-select: none;
font-size: 12px; font-size: 0.8rem;
color: $roomtopic-color; color: $roomtopic-color;
display: inline-block; display: inline-block;
margin-left: 9px; margin-left: 9px;
@ -489,7 +489,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
white-space: normal !important; white-space: normal !important;
line-height: inherit !important; line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: 14px; font-size: 0.933rem;
pre, code { pre, code {
font-family: $monospace-font-family !important; font-family: $monospace-font-family !important;
@ -589,9 +589,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile.mx_EventTile_info { .mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px; padding-top: 0px;
font-size: 13px; font-size: 0.867rem;
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
line-height: 20px; line-height: 1.333rem;
} }
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: 4px; top: 4px;
@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
} }
.mx_EventTile .mx_SenderProfile { .mx_EventTile .mx_SenderProfile {
font-size: 13px; font-size: 0.867rem;
} }
.mx_EventTile.mx_EventTile_emote { .mx_EventTile.mx_EventTile_emote {

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

@ -34,8 +34,8 @@ limitations under the License.
top: -12px; top: -12px;
border-radius: 16px; border-radius: 16px;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 0.8rem;
line-height: 14px; line-height: 0.933rem;
text-align: center; text-align: center;
// to be able to get it centered // to be able to get it centered
// with text-align in parent // with text-align in parent

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

@ -59,7 +59,7 @@ limitations under the License.
.mx_MemberDeviceInfo_deviceId { .mx_MemberDeviceInfo_deviceId {
word-break: break-word; word-break: break-word;
font-size: 13px; font-size: 0.867rem;
} }
.mx_MemberDeviceInfo_deviceInfo { .mx_MemberDeviceInfo_deviceInfo {

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

@ -48,7 +48,7 @@ limitations under the License.
} }
.mx_MemberInfo h2 { .mx_MemberInfo h2 {
font-size: 18px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
margin: 16px 0 16px 15px; margin: 16px 0 16px 15px;
} }
@ -94,12 +94,12 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $input-darker-fg-color; color: $input-darker-fg-color;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 0.8rem;
margin: 4px 0; margin: 4px 0;
} }
.mx_MemberInfo_profileField { .mx_MemberInfo_profileField {
font-size: 15px; font-size: 1rem;
position: relative; position: relative;
} }
@ -109,10 +109,10 @@ limitations under the License.
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 1rem;
color: $primary-fg-color; color: $primary-fg-color;
margin-left: 8px; margin-left: 8px;
line-height: 23px; line-height: 1.533rem;
} }
.mx_MemberInfo_createRoom { .mx_MemberInfo_createRoom {
@ -128,7 +128,7 @@ limitations under the License.
} }
.mx_MemberInfo label { .mx_MemberInfo label {
font-size: 13px; font-size: 0.867rem;
} }
.mx_MemberInfo label .mx_MemberInfo_label_text { .mx_MemberInfo label .mx_MemberInfo_label_text {
@ -144,7 +144,7 @@ limitations under the License.
} }
.mx_MemberInfo_statusMessage { .mx_MemberInfo_statusMessage {
font-size: 11px; font-size: 0.733rem;
opacity: 0.5; opacity: 0.5;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

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

@ -30,7 +30,7 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 0.867rem;
padding-left: 3px; padding-left: 3px;
padding-right: 12px; padding-right: 12px;
margin-top: 8px; margin-top: 8px;

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

@ -105,7 +105,7 @@ limitations under the License.
min-height: 60px; min-height: 60px;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
font-size: 14px; font-size: 0.933rem;
margin-right: 6px; margin-right: 6px;
} }
@ -161,7 +161,7 @@ limitations under the License.
box-shadow: none; box-shadow: none;
color: $primary-fg-color; color: $primary-fg-color;
background-color: $primary-bg-color; background-color: $primary-bg-color;
font-size: 14px; font-size: 0.933rem;
max-height: 120px; max-height: 120px;
overflow: auto; overflow: auto;
/* needed for FF */ /* needed for FF */
@ -242,7 +242,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
font-size: 10px; font-size: 0.667rem;
color: $greyed-fg-color; color: $greyed-fg-color;
} }

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

@ -97,13 +97,13 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip { .mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 0.867rem;
font-weight: 600; font-weight: 600;
min-width: 54px; min-width: 54px;
text-align: center; text-align: center;
.mx_MessageComposerFormatBar_tooltipShortcut { .mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 9px; font-size: 0.600rem;
opacity: 0.7; opacity: 0.7;
} }
} }

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

@ -15,6 +15,6 @@ limitations under the License.
*/ */
.mx_PresenceLabel { .mx_PresenceLabel {
font-size: 11px; font-size: 0.733rem;
opacity: 0.5; opacity: 0.5;
} }

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

@ -28,7 +28,7 @@ limitations under the License.
} }
.mx_RoomDropTarget { .mx_RoomDropTarget {
font-size: 13px; font-size: 0.867rem;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px dashed $accent-color; border: 1px dashed $accent-color;
@ -41,7 +41,7 @@ limitations under the License.
.mx_RoomDropTarget_label { .mx_RoomDropTarget_label {
position: relative; position: relative;
margin-top: 3px; margin-top: 3px;
line-height: 21px; line-height: 1.400rem;
z-index: 1; z-index: 1;
text-align: center; text-align: center;
} }

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

@ -77,9 +77,9 @@ limitations under the License.
} }
.mx_RoomHeader_simpleHeader { .mx_RoomHeader_simpleHeader {
line-height: 52px; line-height: 3.467rem;
color: $roomheader-color; color: $roomheader-color;
font-size: 18px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
overflow: hidden; overflow: hidden;
margin-left: 63px; margin-left: 63px;
@ -102,7 +102,7 @@ limitations under the License.
overflow: hidden; overflow: hidden;
color: $roomheader-color; color: $roomheader-color;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 1.2rem;
margin: 0 7px; margin: 0 7px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
display: flex; display: flex;
@ -161,7 +161,7 @@ limitations under the License.
flex: 1; flex: 1;
color: $roomtopic-color; color: $roomtopic-color;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 0.867rem;
margin: 0 7px; margin: 0 7px;
margin-top: 4px; // to align baseline of topic with room name margin-top: 4px; // to align baseline of topic with room name
overflow: hidden; overflow: hidden;

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

@ -47,13 +47,13 @@ limitations under the License.
} }
.mx_RoomList_emptySubListTip { .mx_RoomList_emptySubListTip {
font-size: 13px; font-size: 0.867rem;
padding: 5px; padding: 5px;
border: 1px dashed $accent-color; border: 1px dashed $accent-color;
color: $primary-fg-color; color: $primary-fg-color;
background-color: $droptarget-bg-color; background-color: $droptarget-bg-color;
border-radius: 4px; border-radius: 4px;
line-height: 16px; line-height: 1.067rem;
} }
.mx_RoomList_emptySubListTip .mx_RoleButton { .mx_RoomList_emptySubListTip .mx_RoleButton {

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

@ -23,7 +23,7 @@ limitations under the License.
-webkit-align-items: center; -webkit-align-items: center;
h3 { h3 {
font-size: 18px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle { &.mx_RoomPreviewBar_spinnerTitle {
@ -48,8 +48,8 @@ limitations under the License.
} }
.mx_RoomPreviewBar_footer { .mx_RoomPreviewBar_footer {
font-size: 12px; font-size: 0.8rem;
line-height: 20px; line-height: 1.333rem;
.mx_Spinner { .mx_Spinner {
vertical-align: middle; vertical-align: middle;

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

@ -64,7 +64,7 @@ limitations under the License.
.mx_RoomTile_subtext { .mx_RoomTile_subtext {
display: inline-block; display: inline-block;
font-size: 11px; font-size: 0.733rem;
padding: 0 0 0 7px; padding: 0 0 0 7px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -112,7 +112,7 @@ limitations under the License.
} }
.mx_RoomTile_name { .mx_RoomTile_name {
font-size: 14px; font-size: 0.933rem;
padding: 0 4px; padding: 0 4px;
color: $roomtile-name-color; color: $roomtile-name-color;
white-space: nowrap; white-space: nowrap;
@ -126,7 +126,7 @@ limitations under the License.
padding: 0 0.4em; padding: 0 0.4em;
color: $roomtile-badge-fg-color; color: $roomtile-badge-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 0.8rem;
} }
.collapsed { .collapsed {

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

@ -22,7 +22,7 @@ limitations under the License.
.mx_SearchBar_input { .mx_SearchBar_input {
// border: 1px solid $input-border-color; // border: 1px solid $input-border-color;
// font-size: 15px; // font-size: 1rem;
flex: 1 1 0; flex: 1 1 0;
margin-left: 22px; margin-left: 22px;
} }
@ -45,7 +45,7 @@ limitations under the License.
border: 0; border: 0;
margin: 0 0 0 22px; margin: 0 0 0 22px;
padding: 5px; padding: 5px;
font-size: 15px; font-size: 1rem;
cursor: pointer; cursor: pointer;
color: $primary-fg-color; color: $primary-fg-color;
border-bottom: 2px solid $accent-color; border-bottom: 2px solid $accent-color;

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

@ -18,7 +18,7 @@ limitations under the License.
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 14px; font-size: 0.933rem;
justify-content: center; justify-content: center;
margin-right: 6px; margin-right: 6px;
// don't grow wider than available space // don't grow wider than available space

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

@ -49,7 +49,7 @@ limitations under the License.
border-radius: 40px; border-radius: 40px;
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 24px; line-height: 1.600rem;
font-size: 0.8em; font-size: 0.8em;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
@ -57,7 +57,7 @@ limitations under the License.
.mx_WhoIsTypingTile_label { .mx_WhoIsTypingTile_label {
flex: 1; flex: 1;
font-size: 14px; font-size: 0.933rem;
font-weight: 600; font-weight: 600;
color: $eventtile-meta-color; color: $eventtile-meta-color;
} }

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

@ -19,7 +19,7 @@ limitations under the License.
} }
.mx_SettingsTab_heading { .mx_SettingsTab_heading {
font-size: 20px; font-size: 1.333rem;
font-weight: 600; font-weight: 600;
color: $primary-fg-color; color: $primary-fg-color;
} }
@ -29,7 +29,7 @@ limitations under the License.
} }
.mx_SettingsTab_subheading { .mx_SettingsTab_subheading {
font-size: 16px; font-size: 1.067rem;
display: block; display: block;
font-family: $font-family; font-family: $font-family;
font-weight: 600; font-weight: 600;
@ -40,7 +40,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText { .mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color; color: $settings-subsection-fg-color;
font-size: 14px; font-size: 0.933rem;
display: block; display: block;
margin: 10px 100px 10px 0; // Align with the rest of the view margin: 10px 100px 10px 0; // Align with the rest of the view
} }
@ -61,7 +61,7 @@ limitations under the License.
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 0.933rem;
color: $primary-fg-color; color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box; box-sizing: border-box;

2
res/css/views/terms/_InlineTermsAgreement.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_InlineTermsAgreement_cbContainer { .mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 0.933rem;
a { a {
color: $accent-color; color: $accent-color;

4
res/css/views/verification/_VerificationShowSas.scss
View file

@ -48,14 +48,14 @@ limitations under the License.
} }
.mx_VerificationShowSas_emojiSas_emoji { .mx_VerificationShowSas_emojiSas_emoji {
font-size: 32px; font-size: 2.133rem;
} }
.mx_VerificationShowSas_emojiSas_label { .mx_VerificationShowSas_emojiSas_label {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 12px; font-size: 0.8rem;
} }
.mx_VerificationShowSas_emojiSas_break { .mx_VerificationShowSas_emojiSas_break {

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

@ -21,5 +21,5 @@ limitations under the License.
text-align: center; text-align: center;
padding: 6px; padding: 6px;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 0.867rem;
} }

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

@ -54,7 +54,7 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
width: 80px; width: 80px;
height: 36px; height: 36px;
line-height: 36px; line-height: 2.400rem;
border-radius: 36px; border-radius: 36px;
color: $accent-fg-color; color: $accent-fg-color;
margin: auto; margin: auto;

2
res/themes/dark/css/_dark.scss
View file

@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
border: 0px; border: 0px;
border-radius: 4px; border-radius: 4px;
font-family: $font-family; font-family: $font-family;
font-size: 14px; font-size: 0.933rem;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $button-bg-color;
width: auto; width: auto;

4
res/themes/light/css/_light.scss
View file

@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
border: 0px; border: 0px;
border-radius: 4px; border-radius: 4px;
font-family: $font-family; font-family: $font-family;
font-size: 14px; font-size: 0.933rem;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $button-bg-color;
width: auto; width: auto;
@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
@define-mixin mx_DialogButton_small { @define-mixin mx_DialogButton_small {
@mixin mx_DialogButton; @mixin mx_DialogButton;
font-size: 15px; font-size: 1rem;
padding: 0px 1.5em 0px 1.5em; padding: 0px 1.5em 0px 1.5em;
} }