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

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 {