Make all 'font-size's and 'line-height's rem
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:
parent
cf4f595f79
commit
da34e6241d
91 changed files with 230 additions and 226 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -16,5 +16,5 @@ limitations under the License.
|
|||
|
||||
.mx_MessageTimestamp {
|
||||
color: $event-timestamp-color;
|
||||
font-size: 10px;
|
||||
font-size: 0.667rem;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue