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

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

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

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

@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
font-size: 0.867rem;
padding: 9px;
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 {
display: flex;
font-size: 14px;
font-size: 0.933rem;
color: $event-timestamp-color;
}
@ -60,7 +60,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: 11px;
font-size: 0.733rem;
text-align: right;
white-space: nowrap;
}
@ -80,7 +80,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
font-size: 11px;
font-size: 0.733rem;
opacity: 1.0;
color: $event-timestamp-color;
}
@ -90,7 +90,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
font-size: 11px;
font-size: 0.733rem;
opacity: 1.0;
color: $event-timestamp-color;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 50px;
line-height: 50px;
line-height: 3.333rem;
}
.mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
line-height: 1.600rem;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color;
font-size: 13px;
font-size: 0.867rem;
opacity: 0.5;
padding-bottom: 20px;
}
@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 50px;
line-height: 3.333rem;
color: $primary-fg-color;
opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: 50px;
line-height: 3.333rem;
color: $primary-fg-color;
opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 40px;
line-height: 40px;
line-height: 2.667rem;
}
.mx_RoomStatusBar_typingBar {
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;
color: $roomsublist-label-fg-color;
font-weight: 700;
font-size: 12px;
font-size: 0.8rem;
margin-left: 8px;
}
@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
font-size: 0.8rem;
padding: 0 5px;
color: $roomtile-badge-fg-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 {
min-width: 0px;
width: 100%;
font-size: 18px;
font-size: 1.2rem;
text-align: center;
pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty {
flex: 1 1 auto;
font-size: 13px;
font-size: 0.867rem;
padding-left: 3em;
padding-right: 3em;
margin-right: 20px;

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

@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer;
display: block;
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
margin-bottom: 6px;
position: relative;

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

@ -139,7 +139,7 @@ limitations under the License.
background-color: $neutral-badge-color;
color: #ffffff;
font-weight: 600;
font-size: 10px;
font-size: 0.667rem;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@ -157,7 +157,7 @@ limitations under the License.
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 14px;
font-size: 0.933rem;
padding: 0 5px;
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-row: 1;
margin: 0;
font-size: 15px;
font-size: 1rem;
font-weight: 600;
}
@ -96,11 +96,11 @@ limitations under the License.
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: 12px;
font-size: 0.8rem;
}
.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 {
margin: 0 7px;
font-size: 18px;
font-size: 1.2rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

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

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

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

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

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

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

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

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

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter {
text-align: center;
width: 100%;
font-size: 14px;
font-size: 0.933rem;
opacity: 0.72;
padding: 20px 0;
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;
h2 {
font-size: 24px;
font-size: 1.600rem;
font-weight: 600;
margin-top: 0;
}
h3 {
font-size: 14px;
font-size: 0.933rem;
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 {
border: none;
font-size: 14px;
font-size: 0.933rem;
font-weight: 600;
color: $authpage-lang-color;
}

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

@ -65,5 +65,5 @@ limitations under the License.
}
.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;
display: flex;
align-items: center;
line-height: 16px;
line-height: 1.067rem;
}
.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 {
@mixin mx_DialogButton;
align-self: start;
font-size: 12px;
font-size: 0.8rem;
padding: 6px 1em;
border: 1px solid transparent;
margin-right: 10px;

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

@ -22,7 +22,7 @@ limitations under the License.
white-space: nowrap;
display: flex;
align-items: center;
line-height: 16px;
line-height: 1.067rem;
}
.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;
.mx_TopLeftMenu_greyedText {
font-size: 12px;
font-size: 0.8rem;
opacity: 0.5;
}
.mx_TopLeftMenu_upgradeLink {
font-size: 12px;
font-size: 0.8rem;
img {
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:focus {
height: 26px;
font-size: 14px;
font-size: 0.933rem;
font-family: $font-family;
padding-left: 12px;
padding-right: 12px;
@ -50,7 +50,7 @@ limitations under the License.
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
line-height: 2.400rem;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;

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

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

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

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

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

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

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

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

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

@ -40,8 +40,8 @@ limitations under the License.
textarea,
textarea:focus {
height: 34px;
line-height: 34px;
font-size: 14px;
line-height: 2.267rem;
font-size: 0.933rem;
padding-left: 12px;
margin: 0 !important;
border: 0 !important;
@ -65,7 +65,7 @@ limitations under the License.
min-width: 48px;
margin-left: 10px;
height: 25px;
line-height: 25px;
line-height: 1.667rem;
}
.mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
padding-bottom: 10px;
h3 {
font-size: 12px;
font-size: 0.8rem;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
@ -143,23 +143,23 @@ limitations under the License.
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: 14px;
font-size: 0.933rem;
color: $primary-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_userId {
font-size: 12px;
font-size: 0.8rem;
color: $muted-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_time {
text-align: right;
font-size: 12px;
font-size: 0.8rem;
color: $muted-fg-color;
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 {
@ -176,7 +176,7 @@ limitations under the License.
border-radius: 12px;
display: inline-block;
height: 24px;
line-height: 24px;
line-height: 1.600rem;
padding-left: 8px;
padding-right: 8px;
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 {
list-style-type: none;
font-size: 14px;
font-size: 0.933rem;
padding: 0;
color: $primary-fg-color;
@ -60,7 +60,7 @@ limitations under the License.
}
.mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px;
font-size: 0.667rem;
padding: 0 8px;
}
}

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

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

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

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

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

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

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

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

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

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

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

@ -27,7 +27,7 @@ limitations under the License.
// userid
.mx_UnknownDeviceDialog p {
font-weight: bold;
font-size: 16px;
font-size: 1.067rem;
}
.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 {
padding: 0 10px;
font-size: 15px;
font-size: 1rem;
font-weight: 600;
line-height: 20px;
line-height: 1.333rem;
margin-bottom: 4px;
// remove server button
@ -77,16 +77,16 @@ limitations under the License.
.mx_NetworkDropdown_server_subtitle {
padding: 0 10px;
font-size: 10px;
line-height: 14px;
font-size: 0.667rem;
line-height: 0.933rem;
margin-top: -4px;
margin-bottom: 4px;
color: $muted-fg-color;
}
.mx_NetworkDropdown_server_network {
font-size: 12px;
line-height: 16px;
font-size: 0.8rem;
line-height: 1.067rem;
padding: 4px 10px;
cursor: pointer;
position: relative;
@ -154,7 +154,7 @@ limitations under the License.
.mx_NetworkDropdown_handle_server {
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;
border-radius: 4px;
display: inline-block;
font-size: 14px;
font-size: 0.933rem;
}
.mx_AccessibleButton_kind_primary {

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

@ -19,9 +19,9 @@ limitations under the License.
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
line-height: 26px;
line-height: 1.733rem;
color: $primary-fg-color;
font-size: 14px;
font-size: 0.933rem;
font-weight: normal;
margin-right: 4px;
}

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

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

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

@ -29,7 +29,7 @@ limitations under the License.
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-size: 12px;
font-size: 0.8rem;
user-select: none;
}
@ -53,7 +53,7 @@ limitations under the License.
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
line-height: 2.333rem;
padding-left: 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 {
font-size: 14px;
font-size: 0.933rem;
display: inline-flex;
}
@ -27,7 +27,7 @@ limitations under the License.
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
line-height: 0.8rem;
}
.mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
line-height: 2.000rem;
}
.mx_MatrixChat_useCompactLayout {
.mx_EventListSummary {
font-size: 13px;
font-size: 0.867rem;
.mx_EventTile_line {
line-height: 20px;
line-height: 1.333rem;
}
}
.mx_EventListSummary_line {
line-height: 22px;
line-height: 1.467rem;
}
.mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
}
.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 {
font-weight: normal;
font-family: $font-family;
font-size: 14px;
font-size: 0.933rem;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
font-size: 0.933rem;
position: absolute;
left: 0px;
top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
font-size: 0.667rem;
top: -13px;
padding: 0 2px;
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 {
line-height: 16px;
line-height: 1.067rem;
padding: 5px 15px;
font-size: 12px;
font-size: 0.8rem;
height: min-content;
&:not(:last-child) {

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

@ -102,13 +102,13 @@ limitations under the License.
}
.mx_ImageView_name {
font-size: 18px;
font-size: 1.2rem;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: 15px;
font-size: 1rem;
opacity: 0.5;
}
@ -118,13 +118,13 @@ limitations under the License.
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: 14px;
font-size: 0.933rem;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: 11px;
font-size: 0.733rem;
}
.mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
}
.mx_ImageView_button {
font-size: 15px;
font-size: 1rem;
opacity: 0.5;
margin-top: 18px;
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;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 10px;
font-size: 0.667rem;
font-weight: 600;
padding: 6px;
z-index: 5001;

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

@ -9,7 +9,7 @@
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: 20px;
line-height: 1.333rem;
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
padding: 10px;
pointer-events: none;
line-height: 14px;
font-size: 12px;
line-height: 0.933rem;
font-size: 0.8rem;
font-weight: 600;
color: $primary-fg-color;
max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
text-align: center;
border: none;
border-radius: 3px;
font-size: 14px;
font-size: 0.933rem;
line-height: 1.2;
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;
opacity: 0.6;
line-height: 11px;
line-height: 0.733rem;
text-align: center;
cursor: pointer;
@ -47,6 +47,6 @@ limitations under the License.
.mx_TooltipButton_helpText {
width: 400px;
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 {
display: inline-block;
font-size: 20px;
font-size: 1.333rem;
padding: 5px;
width: 100%;
height: 100%;
@ -183,7 +183,7 @@ limitations under the License.
}
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
font-size: 16px;
font-size: 1.067rem;
font-weight: 600;
margin: 0;
}
@ -197,7 +197,7 @@ limitations under the License.
}
.mx_EmojiPicker_preview_emoji {
font-size: 32px;
font-size: 2.133rem;
padding: 8px 16px;
}
@ -212,7 +212,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
font-size: 14px;
font-size: 0.933rem;
&::before, &::after {
content: ":";

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

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

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

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

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

@ -16,5 +16,5 @@ limitations under the License.
.mx_MessageTimestamp {
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 {
text-decoration: none;
font-size: 10px;
font-size: 0.667rem;
font-weight: 600;
margin-left: 6px;
vertical-align: top;

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
height: 20px;
line-height: 21px;
line-height: 1.400rem;
margin-right: 6px;
padding: 0 6px;
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 {
display: flex;
opacity: 0.6;
font-size: 12px;
font-size: 0.8rem;
pre, code {
flex: 1;

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

@ -45,7 +45,7 @@ limitations under the License.
.mx_cryptoEvent_title {
font-weight: 600;
font-size: 15px;
font-size: 1rem;
grid-column: 2;
grid-row: 1;
}
@ -56,7 +56,7 @@ limitations under the License.
}
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
font-size: 12px;
font-size: 0.8rem;
}
.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: 1;
overflow-y: auto;
font-size: 12px;
font-size: 0.8rem;
.mx_UserInfo_cancel {
cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
}
h2 {
font-size: 18px;
font-size: 1.2rem;
font-weight: 600;
margin: 18px 0 0 0;
}
@ -109,7 +109,7 @@ limitations under the License.
justify-content: center;
// override the calculated sizes so that the letter isn't HUGE
font-size: 56px !important;
font-size: 3.733rem !important;
width: 100% !important;
transition: font-size 0.5s;
}
@ -122,7 +122,7 @@ limitations under the License.
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
font-size: 12px;
font-size: 0.8rem;
margin: 4px 0;
}
@ -134,8 +134,8 @@ limitations under the License.
text-align: center;
h2 {
font-size: 18px;
line-height: 25px;
font-size: 1.2rem;
line-height: 1.667rem;
flex: 1;
justify-content: center;
align-items: center;
@ -197,7 +197,7 @@ limitations under the License.
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
line-height: 16px;
line-height: 1.067rem;
margin: 8px 0;
&.mx_UserInfo_destructive {
@ -206,7 +206,7 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
font-size: 11px;
font-size: 0.733rem;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@ -282,6 +282,6 @@ limitations under the License.
}
.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 {
font-size: 14px;
font-size: 0.933rem;
margin-top: 71px;
text-align: center;
}

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

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

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

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

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

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

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

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

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

@ -34,8 +34,8 @@ limitations under the License.
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-size: 0.8rem;
line-height: 0.933rem;
text-align: center;
// to be able to get it centered
// 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 {
word-break: break-word;
font-size: 13px;
font-size: 0.867rem;
}
.mx_MemberDeviceInfo_deviceInfo {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -47,13 +47,13 @@ limitations under the License.
}
.mx_RoomList_emptySubListTip {
font-size: 13px;
font-size: 0.867rem;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: 16px;
line-height: 1.067rem;
}
.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;
h3 {
font-size: 18px;
font-size: 1.2rem;
font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle {
@ -48,8 +48,8 @@ limitations under the License.
}
.mx_RoomPreviewBar_footer {
font-size: 12px;
line-height: 20px;
font-size: 0.8rem;
line-height: 1.333rem;
.mx_Spinner {
vertical-align: middle;

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

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

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

@ -22,7 +22,7 @@ limitations under the License.
.mx_SearchBar_input {
// border: 1px solid $input-border-color;
// font-size: 15px;
// font-size: 1rem;
flex: 1 1 0;
margin-left: 22px;
}
@ -45,7 +45,7 @@ limitations under the License.
border: 0;
margin: 0 0 0 22px;
padding: 5px;
font-size: 15px;
font-size: 1rem;
cursor: pointer;
color: $primary-fg-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;
display: flex;
flex-direction: column;
font-size: 14px;
font-size: 0.933rem;
justify-content: center;
margin-right: 6px;
// 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;
width: 24px;
height: 24px;
line-height: 24px;
line-height: 1.600rem;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@ -57,7 +57,7 @@ limitations under the License.
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-size: 0.933rem;
font-weight: 600;
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 {
font-size: 20px;
font-size: 1.333rem;
font-weight: 600;
color: $primary-fg-color;
}
@ -29,7 +29,7 @@ limitations under the License.
}
.mx_SettingsTab_subheading {
font-size: 16px;
font-size: 1.067rem;
display: block;
font-family: $font-family;
font-weight: 600;
@ -40,7 +40,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 14px;
font-size: 0.933rem;
display: block;
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 {
vertical-align: middle;
display: inline-block;
font-size: 14px;
font-size: 0.933rem;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;

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

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

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

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

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

@ -21,5 +21,5 @@ limitations under the License.
text-align: center;
padding: 6px;
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;
width: 80px;
height: 36px;
line-height: 36px;
line-height: 2.400rem;
border-radius: 36px;
color: $accent-fg-color;
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-radius: 4px;
font-family: $font-family;
font-size: 14px;
font-size: 0.933rem;
color: $button-fg-color;
background-color: $button-bg-color;
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-radius: 4px;
font-family: $font-family;
font-size: 14px;
font-size: 0.933rem;
color: $button-fg-color;
background-color: $button-bg-color;
width: auto;
@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: 15px;
font-size: 1rem;
padding: 0px 1.5em 0px 1.5em;
}