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

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
Download patch file Download diff file Expand all files Collapse all files

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 {