OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use variables for the rem values. 

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.
pull/21833/head
Jorik Schellekens 2020-03-31 15:26:23 +01:00
parent da34e6241d
commit 6cf9166c4a
97 changed files with 280 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
res/css/_common.scss
View File

@ -16,6 +16,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
@import "./_font-sizes.scss";
:root { :root {
font-size: 15px; font-size: 15px;
} }
@ -29,7 +31,7 @@ html {
body { body {
font-family: $font-family; font-family: $font-family;
font-size: 1rem; font-size: $font-15px;
background-color: $primary-bg-color; background-color: $primary-bg-color;
color: $primary-fg-color; color: $primary-fg-color;
border: 0px; border: 0px;
@ -64,7 +66,7 @@ b {
h2 { h2 {
color: $primary-fg-color; color: $primary-fg-color;
font-weight: 400; font-weight: 400;
font-size: 1.2rem; font-size: $font-18px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -80,7 +82,7 @@ input[type=search],
input[type=password] { input[type=password] {
padding: 9px; padding: 9px;
font-family: $font-family; font-family: $font-family;
font-size: 0.933rem; font-size: $font-14px;
font-weight: 600; font-weight: 600;
min-width: 0; min-width: 0;
} }
@ -257,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $light-fg-color; color: $light-fg-color;
z-index: 4012; z-index: 4012;
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: $font-15px;
position: relative; position: relative;
padding: 25px 30px 30px 30px; padding: 25px 30px 30px 30px;
max-height: 80%; max-height: 80%;
@ -325,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_title { .mx_Dialog_title {
font-size: 1.467rem; font-size: $font-22px;
line-height: 2.400rem; line-height: $font-36px;
color: $dialog-title-fg-color; color: $dialog-title-fg-color;
} }
@ -354,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content { .mx_Dialog_content {
margin: 24px 0 68px; margin: 24px 0 68px;
font-size: 0.933rem; font-size: $font-14px;
color: $primary-fg-color; color: $primary-fg-color;
word-wrap: break-word; word-wrap: break-word;
} }
@ -450,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_TextInputDialog_input { .mx_TextInputDialog_input {
font-size: 1rem; font-size: $font-15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;

47
res/css/_font-sizes.scss Normal file
View File

@ -0,0 +1,47 @@
$font-8px: 0.533rem;
$font-9px: 0.600rem;
$font-10px: 0.667rem;
$font-10-4px: 0.693rem;
$font-11px: 0.733rem;
$font-12px: 0.800rem;
$font-13px: 0.867rem;
$font-14px: 0.933rem;
$font-15px: 1.000rem;
$font-16px: 1.067rem;
$font-17px: 1.133rem;
$font-18px: 1.200rem;
$font-19px: 1.267rem;
$font-20px: 1.333rem;
$font-21px: 1.400rem;
$font-22px: 1.467rem;
$font-23px: 1.533rem;
$font-24px: 1.600rem;
$font-25px: 1.667rem;
$font-26px: 1.733rem;
$font-27px: 1.800rem;
$font-28px: 1.867rem;
$font-29px: 1.933rem;
$font-30px: 2.000rem;
$font-31px: 2.067rem;
$font-32px: 2.133rem;
$font-33px: 2.200rem;
$font-34px: 2.267rem;
$font-35px: 2.333rem;
$font-36px: 2.400rem;
$font-37px: 2.467rem;
$font-38px: 2.533rem;
$font-39px: 2.600rem;
$font-40px: 2.667rem;
$font-41px: 2.733rem;
$font-42px: 2.800rem;
$font-43px: 2.867rem;
$font-44px: 2.933rem;
$font-45px: 3.000rem;
$font-46px: 3.067rem;
$font-47px: 3.133rem;
$font-48px: 3.200rem;
$font-49px: 3.267rem;
$font-50px: 3.333rem;
$font-51px: 3.400rem;
$font-52px: 3.467rem;
$font-400px: 26.667rem;

2
res/css/rethemendex.sh
View File

@ -8,7 +8,7 @@ cd `dirname $0`
# we used to have exclude /themes from the find at this point. # we used to have exclude /themes from the find at this point.
# as themes are no longer a spurious subdirectory of css/, we don't # as themes are no longer a spurious subdirectory of css/, we don't
# need it any more. # need it any more.
find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort | find . -iname _\*.scss | sort | fgrep -v _components.scss | LC_ALL=C sort |
while read i; do while read i; do
echo "@import \"$i\";" echo "@import \"$i\";"
done done

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar { .mx_RoomStatusBar_callBar {
height: 50px; height: 50px;
line-height: 3.333rem; line-height: $font-50px;
} }
.mx_RoomStatusBar_placeholderIndicator span { .mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px; border-radius: 40px;
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 1.600rem; line-height: $font-24px;
font-size: 0.8em; font-size: 0.8em;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc { .mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color; color: $primary-fg-color;
font-size: 0.867rem; font-size: $font-13px;
opacity: 0.5; opacity: 0.5;
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar { .mx_RoomStatusBar_typingBar {
height: 50px; height: 50px;
line-height: 3.333rem; line-height: $font-50px;
color: $primary-fg-color; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone { .mx_RoomStatusBar_isAlone {
height: 50px; height: 50px;
line-height: 3.333rem; line-height: $font-50px;
color: $primary-fg-color; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar { .mx_RoomStatusBar_callBar {
height: 40px; height: 40px;
line-height: 2.667rem; line-height: $font-40px;
} }
.mx_RoomStatusBar_typingBar { .mx_RoomStatusBar_typingBar {
height: 40px; height: 40px;
line-height: 2.667rem; line-height: $font-40px;
} }
} }

4
res/css/structures/_RoomSubList.scss
View File

@ -68,7 +68,7 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
color: $roomsublist-label-fg-color; color: $roomsublist-label-fg-color;
font-weight: 700; font-weight: 700;
font-size: 0.8rem; font-size: $font-12px;
margin-left: 8px; margin-left: 8px;
} }
@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
font-size: 0.8rem; font-size: $font-12px;
padding: 0 5px; padding: 0 5px;
color: $roomtile-badge-fg-color; color: $roomtile-badge-fg-color;
background-color: $roomtile-name-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 { .mx_RoomView_fileDropTarget {
min-width: 0px; min-width: 0px;
width: 100%; width: 100%;
font-size: 1.2rem; font-size: $font-18px;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty { .mx_RoomView_empty {
flex: 1 1 auto; flex: 1 1 auto;
font-size: 0.867rem; font-size: $font-13px;
padding-left: 3em; padding-left: 3em;
padding-right: 3em; padding-right: 3em;
margin-right: 20px; margin-right: 20px;

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

@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
font-size: 0.933rem; font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px; margin-bottom: 6px;
position: relative; position: relative;

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

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

2
res/css/structures/_TopLeftMenuButton.scss
View File

@ -32,7 +32,7 @@ limitations under the License.
.mx_TopLeftMenuButton_name { .mx_TopLeftMenuButton_name {
margin: 0 7px; margin: 0 7px;
font-size: 1.2rem; font-size: $font-18px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

@ -65,5 +65,5 @@ limitations under the License.
} }
.mx_ServerTypeSelector_description { .mx_ServerTypeSelector_description {
font-size: 0.667rem; font-size: $font-10px;
} }

2
res/css/views/context_menus/_RoomTileContextMenu.scss
View File

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

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

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

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

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

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

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

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

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

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

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

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

@ -40,8 +40,8 @@ limitations under the License.
textarea, textarea,
textarea:focus { textarea:focus {
height: 34px; height: 34px;
line-height: 2.267rem; line-height: $font-34px;
font-size: 0.933rem; font-size: $font-14px;
padding-left: 12px; padding-left: 12px;
margin: 0 !important; margin: 0 !important;
border: 0 !important; border: 0 !important;
@ -65,7 +65,7 @@ limitations under the License.
min-width: 48px; min-width: 48px;
margin-left: 10px; margin-left: 10px;
height: 25px; height: 25px;
line-height: 1.667rem; line-height: $font-25px;
} }
.mx_InviteDialog_buttonAndSpinner { .mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
padding-bottom: 10px; padding-bottom: 10px;
h3 { h3 {
font-size: 0.8rem; font-size: $font-12px;
color: $muted-fg-color; color: $muted-fg-color;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@ -143,23 +143,23 @@ limitations under the License.
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: 0.933rem; font-size: $font-14px;
color: $primary-fg-color; color: $primary-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_InviteDialog_roomTile_userId { .mx_InviteDialog_roomTile_userId {
font-size: 0.8rem; font-size: $font-12px;
color: $muted-fg-color; color: $muted-fg-color;
margin-left: 7px; margin-left: 7px;
} }
.mx_InviteDialog_roomTile_time { .mx_InviteDialog_roomTile_time {
text-align: right; text-align: right;
font-size: 0.8rem; font-size: $font-12px;
color: $muted-fg-color; color: $muted-fg-color;
float: right; float: right;
line-height: 2.400rem; // Height of the avatar to keep the time vertically aligned line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
} }
.mx_InviteDialog_roomTile_highlight { .mx_InviteDialog_roomTile_highlight {
@ -176,7 +176,7 @@ limitations under the License.
border-radius: 12px; border-radius: 12px;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
line-height: 1.600rem; line-height: $font-24px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
color: #ffffff; // this is fine without a var because it's for both themes 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 { .mx_MessageEditHistoryDialog_edits {
list-style-type: none; list-style-type: none;
font-size: 0.933rem; font-size: $font-14px;
padding: 0; padding: 0;
color: $primary-fg-color; color: $primary-fg-color;
@ -60,7 +60,7 @@ limitations under the License.
} }
.mx_MessageActionBar .mx_AccessibleButton { .mx_MessageActionBar .mx_AccessibleButton {
font-size: 0.667rem; font-size: $font-10px;
padding: 0 8px; padding: 0 8px;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

2
res/css/views/elements/_AccessibleButton.scss
View File

@ -27,7 +27,7 @@ limitations under the License.
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
font-size: 0.933rem; font-size: $font-14px;
} }
.mx_AccessibleButton_kind_primary { .mx_AccessibleButton_kind_primary {

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

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

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

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

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

@ -29,7 +29,7 @@ limitations under the License.
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid $strong-input-border-color; border: 1px solid $strong-input-border-color;
font-size: 0.8rem; font-size: $font-12px;
user-select: none; user-select: none;
} }
@ -53,7 +53,7 @@ limitations under the License.
.mx_Dropdown_option { .mx_Dropdown_option {
height: 35px; height: 35px;
line-height: 2.333rem; line-height: $font-35px;
padding-left: 8px; padding-left: 8px;
padding-right: 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 { .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 0.933rem; font-size: $font-14px;
display: inline-flex; display: inline-flex;
} }
@ -27,7 +27,7 @@ limitations under the License.
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
padding-top: 8px; padding-top: 8px;
line-height: 0.8rem; line-height: $font-12px;
} }
.mx_EventListSummary_avatars .mx_BaseAvatar { .mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line { .mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px; margin-left: 63px;
line-height: 2.000rem; line-height: $font-30px;
} }
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_EventListSummary { .mx_EventListSummary {
font-size: 0.867rem; font-size: $font-13px;
.mx_EventTile_line { .mx_EventTile_line {
line-height: 1.333rem; line-height: $font-20px;
} }
} }
.mx_EventListSummary_line { .mx_EventListSummary_line {
line-height: 1.467rem; line-height: $font-22px;
} }
.mx_EventListSummary_toggle { .mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
} }
.mx_TextualEvent.mx_EventListSummary_summary { .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 0.867rem; font-size: $font-13px;
} }
} }

6
res/css/views/elements/_Field.scss
View File

@ -40,7 +40,7 @@ limitations under the License.
.mx_Field textarea { .mx_Field textarea {
font-weight: normal; font-weight: normal;
font-family: $font-family; font-family: $font-family;
font-size: 0.933rem; font-size: $font-14px;
border: none; border: none;
// Even without a border here, we still need this avoid overlapping the rounded // Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above. // corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s; background-color 0.25s ease-out 0.1s;
color: $primary-fg-color; color: $primary-fg-color;
background-color: transparent; background-color: transparent;
font-size: 0.933rem; font-size: $font-14px;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s; background-color 0.25s ease-out 0s;
font-size: 0.667rem; font-size: $font-10px;
top: -13px; top: -13px;
padding: 0 2px; padding: 0 2px;
background-color: $field-focused-label-bg-color; 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 { .mx_FormButton {
line-height: 1.067rem; line-height: $font-16px;
padding: 5px 15px; padding: 5px 15px;
font-size: 0.8rem; font-size: $font-12px;
height: min-content; height: min-content;
&:not(:last-child) { &:not(:last-child) {

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

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

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

@ -9,7 +9,7 @@
border-radius: 16px; border-radius: 16px;
display: inline-block; display: inline-block;
height: 20px; height: 20px;
line-height: 1.333rem; line-height: $font-20px;
padding-left: 5px; 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 z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px; padding: 10px;
pointer-events: none; pointer-events: none;
line-height: 0.933rem; line-height: $font-14px;
font-size: 0.8rem; font-size: $font-12px;
font-weight: 600; font-weight: 600;
color: $primary-fg-color; color: $primary-fg-color;
max-width: 200px; max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
text-align: center; text-align: center;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
font-size: 0.933rem; font-size: $font-14px;
line-height: 1.2; line-height: 1.2;
padding: 6px 8px; 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; transition: opacity 0.2s ease-in;
opacity: 0.6; opacity: 0.6;
line-height: 0.733rem; line-height: $font-11px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -47,6 +47,6 @@ limitations under the License.
.mx_TooltipButton_helpText { .mx_TooltipButton_helpText {
width: 400px; width: 400px;
text-align: start; text-align: start;
line-height: 1.133rem !important; line-height: 17px !important;
} }

8
res/css/views/emojipicker/_EmojiPicker.scss
View File

@ -163,7 +163,7 @@ limitations under the License.
.mx_EmojiPicker_item { .mx_EmojiPicker_item {
display: inline-block; display: inline-block;
font-size: 1.333rem; font-size: $font-20px;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -183,7 +183,7 @@ limitations under the License.
} }
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
font-size: 1.067rem; font-size: $font-16px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
@ -197,7 +197,7 @@ limitations under the License.
} }
.mx_EmojiPicker_preview_emoji { .mx_EmojiPicker_preview_emoji {
font-size: 2.133rem; font-size: $font-32px;
padding: 8px 16px; padding: 8px 16px;
} }
@ -212,7 +212,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode { .mx_EmojiPicker_shortcode {
color: $light-fg-color; color: $light-fg-color;
font-size: 0.933rem; font-size: $font-14px;
&::before, &::after { &::before, &::after {
content: ":"; content: ":";

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

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

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

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

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

@ -16,5 +16,5 @@ limitations under the License.
.mx_MessageTimestamp { .mx_MessageTimestamp {
color: $event-timestamp-color; color: $event-timestamp-color;
font-size: 0.667rem; font-size: $font-10px;
} }

2
res/css/views/messages/_ReactionsRow.scss
View File

@ -21,7 +21,7 @@ limitations under the License.
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {
text-decoration: none; text-decoration: none;
font-size: 0.667rem; font-size: $font-10px;
font-weight: 600; font-weight: 600;
margin-left: 6px; margin-left: 6px;
vertical-align: top; vertical-align: top;

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

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

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

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

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

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

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

@ -63,8 +63,8 @@ limitations under the License.
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
line-height: 1.067rem; line-height: $font-16px;
font-size: 0.667rem; 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 { .mx_GroupRoomTile_name {
flex: 1 1 0; flex: 1 1 0;
overflow: hidden; overflow: hidden;
font-size: 0.933rem; font-size: $font-14px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@ -116,7 +116,7 @@ limitations under the License.
} }
.mx_EntityTile_subtext { .mx_EntityTile_subtext {
font-size: 0.733rem; font-size: $font-11px;
opacity: 0.5; opacity: 0.5;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -125,7 +125,7 @@ limitations under the License.
.mx_EntityTile_power { .mx_EntityTile_power {
padding-inline-start: 6px; padding-inline-start: 6px;
font-size: 0.667rem; font-size: $font-10px;
color: $notice-secondary-color; color: $notice-secondary-color;
max-width: 6em; max-width: 6em;
overflow: hidden; overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -21,5 +21,5 @@ limitations under the License.
text-align: center; text-align: center;
padding: 6px; padding: 6px;
font-weight: bold; font-weight: bold;
font-size: 0.867rem; font-size: $font-13px;
} }

2
res/css/views/voip/_IncomingCallbox.scss
View File

@ -54,7 +54,7 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
width: 80px; width: 80px;
height: 36px; height: 36px;
line-height: 2.400rem; line-height: $font-36px;
border-radius: 36px; border-radius: 36px;
color: $accent-fg-color; color: $accent-fg-color;
margin: auto; margin: auto;

1
res/themes/dark-custom/css/dark-custom.scss
View File

@ -1,3 +1,4 @@
@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss"; @import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss"; @import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss"; @import "../../light/css/_light.scss";

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: 0px;
border-radius: 4px; border-radius: 4px;
font-family: $font-family; font-family: $font-family;
font-size: 0.933rem; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $button-bg-color;
width: auto; width: auto;

1
res/themes/dark/css/dark.scss
View File

@ -1,3 +1,4 @@
@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss"; @import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss"; @import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss"; @import "../../light/css/_light.scss";

1
res/themes/light-custom/css/light-custom.scss
View File

@ -1,3 +1,4 @@
@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss"; @import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss"; @import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss"; @import "../../light/css/_light.scss";

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: 0px;
border-radius: 4px; border-radius: 4px;
font-family: $font-family; font-family: $font-family;
font-size: 0.933rem; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $button-bg-color;
width: auto; width: auto;
@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
@define-mixin mx_DialogButton_small { @define-mixin mx_DialogButton_small {
@mixin mx_DialogButton; @mixin mx_DialogButton;
font-size: 1rem; font-size: $font-15px;
padding: 0px 1.5em 0px 1.5em; padding: 0px 1.5em 0px 1.5em;
} }

1
res/themes/light/css/light.scss
View File

@ -1,3 +1,4 @@
@import "../../../../res/css/_font-sizes.scss";
@import "_paths.scss"; @import "_paths.scss";
@import "_fonts.scss"; @import "_fonts.scss";
@import "_light.scss"; @import "_light.scss";