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

Use variables for the rem values.

Browse source 
It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.
This commit is contained in:
Jorik Schellekens 2020-03-31 15:26:23 +01:00
parent da34e6241d
commit 6cf9166c4a
97 changed files with 280 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

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: 0.8rem;
font-size: $font-12px;
}
.mx_AddWidget_button_full_width {
@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
font-size: 1rem;
font-size: $font-15px;
}
.mx_AppTile {
@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTileMenuBar {
margin: 0;
font-size: 0.8rem;
font-size: $font-12px;
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: 1.067rem;
font-size: $font-16px;
}
.mx_AppPermissionWarning_row {
@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
}
.mx_AppPermissionWarning_smallText {
font-size: 0.8rem;
font-size: $font-12px;
}
.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: 1.067rem;
font-size: 0.667rem;
line-height: $font-16px;
font-size: $font-10-4px;
}
}
}

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: 0.933rem;
font-size: $font-14px;
text-overflow: ellipsis;
white-space: nowrap;
}
@ -116,7 +116,7 @@ limitations under the License.
}
.mx_EntityTile_subtext {
font-size: 0.733rem;
font-size: $font-11px;
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: 0.667rem;
font-size: $font-10px;
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: 0.933rem;
font-size: $font-14px;
position: relative;
}
@ -64,7 +64,7 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
font-size: 0.933rem;
font-size: $font-14px;
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: 1.133rem;
line-height: $font-17px;
/* 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: 1.467rem;
line-height: $font-22px;
}
.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: 3.200rem !important;
line-height: 3.800rem !important;
font-size: 48px !important;
line-height: 57px !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: 0.733rem;
font-size: $font-11px;
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: 0.733rem;
font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile_keyRequestInfo {
font-size: 0.8rem;
font-size: $font-12px;
}
.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: 0.8rem;
font-size: $font-12px;
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: 0.933rem;
font-size: $font-14px;
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: 0.867rem;
font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
line-height: 1.333rem;
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile .mx_SenderProfile {
font-size: 0.867rem;
font-size: $font-13px;
}
.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: 0.8rem;
line-height: 0.933rem;
font-size: $font-12px;
line-height: $font-14px;
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: 0.867rem;
font-size: $font-13px;
}
.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: 1.2rem;
font-size: $font-18px;
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: 0.8rem;
font-size: $font-12px;
margin: 4px 0;
}
.mx_MemberInfo_profileField {
font-size: 1rem;
font-size: $font-15px;
position: relative;
}
@ -109,10 +109,10 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 1rem;
font-size: $font-15px;
color: $primary-fg-color;
margin-left: 8px;
line-height: 1.533rem;
line-height: $font-23px;
}
.mx_MemberInfo_createRoom {
@ -128,7 +128,7 @@ limitations under the License.
}
.mx_MemberInfo label {
font-size: 0.867rem;
font-size: $font-13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
@ -144,7 +144,7 @@ limitations under the License.
}
.mx_MemberInfo_statusMessage {
font-size: 0.733rem;
font-size: $font-11px;
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: 0.867rem;
font-size: $font-13px;
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: 0.933rem;
font-size: $font-14px;
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: 0.933rem;
font-size: $font-14px;
max-height: 120px;
overflow: auto;
/* needed for FF */
@ -242,7 +242,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
font-size: 0.667rem;
font-size: $font-10px;
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: 0.867rem;
font-size: $font-13px;
font-weight: 600;
min-width: 54px;
text-align: center;
.mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 0.600rem;
font-size: $font-9px;
opacity: 0.7;
}
}

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

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

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

@ -28,7 +28,7 @@ limitations under the License.
}
.mx_RoomDropTarget {
font-size: 0.867rem;
font-size: $font-13px;
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: 1.400rem;
line-height: $font-21px;
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: 3.467rem;
line-height: $font-52px;
color: $roomheader-color;
font-size: 1.2rem;
font-size: $font-18px;
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: 1.2rem;
font-size: $font-18px;
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: 0.867rem;
font-size: $font-13px;
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: 0.867rem;
font-size: $font-13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: 1.067rem;
line-height: $font-16px;
}
.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: 1.2rem;
font-size: $font-18px;
font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle {
@ -48,8 +48,8 @@ limitations under the License.
}
.mx_RoomPreviewBar_footer {
font-size: 0.8rem;
line-height: 1.333rem;
font-size: $font-12px;
line-height: $font-20px;
.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: 0.733rem;
font-size: $font-11px;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
@ -112,7 +112,7 @@ limitations under the License.
}
.mx_RoomTile_name {
font-size: 0.933rem;
font-size: $font-14px;
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: 0.8rem;
font-size: $font-12px;
}
.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: 1rem;
// font-size: $font-15px;
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: 1rem;
font-size: $font-15px;
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: 0.933rem;
font-size: $font-14px;
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: 1.600rem;
line-height: $font-24px;
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: 0.933rem;
font-size: $font-14px;
font-weight: 600;
color: $eventtile-meta-color;
}