Merge pull request #3631 from matrix-org/bwindels/userinfo-css-fixes

Fix some styling regressions in member panel
This commit is contained in:
Bruno Windels 2019-11-19 13:24:06 +00:00 committed by GitHub
commit f9b5678b06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 29 deletions

View File

@ -25,7 +25,7 @@ limitations under the License.
width: 12px;
height: 16px;
content: "";
mask: url("$(res)/img/e2e/normal.svg");
mask-image: url("$(res)/img/e2e/normal.svg");
mask-repeat: no-repeat;
mask-size: 100%;
margin-top: 4px;
@ -33,7 +33,7 @@ limitations under the License.
}
&.mx_KeyVerification_icon_verified::after {
mask: url("$(res)/img/e2e/verified.svg");
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
}

View File

@ -195,6 +195,8 @@ limitations under the License.
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: 8px 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
@ -210,6 +212,7 @@ limitations under the License.
.mx_UserInfo_device_name {
flex: 1;
margin-right: 5px;
word-break: break-word;
}
}

View File

@ -22,21 +22,6 @@ limitations under the License.
display: block;
}
.mx_E2EIcon_verified::before, .mx_E2EIcon_warning::before {
content: "";
display: block;
/* the symbols in the shield icons are cut out to make it themeable with css masking.
if they appear on a different background than white, the symbol wouldn't be white though, so we
add a rectangle here below the masked element to shine through the symbol cut-out.
hardcoding white and not using a theme variable as this would probably be white for any theme. */
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
content: "";
display: block;
@ -49,23 +34,11 @@ limitations under the License.
mask-size: contain;
}
.mx_E2EIcon_verified::before {
/* white rectangle below checkmark of shield */
margin: 25% 28% 38% 25%;
}
.mx_E2EIcon_verified::after {
mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $accent-color;
}
.mx_E2EIcon_warning::before {
/* white rectangle below "!" of shield */
margin: 18% 40% 25% 40%;
}
.mx_E2EIcon_warning::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $warning-color;

View File

@ -25,6 +25,7 @@ limitations under the License.
width: 12px;
height: 12px;
mask-repeat: no-repeat;
mask-size: 100%;
}
.mx_MemberDeviceInfo_icon_blacklisted {
mask-image: url('$(res)/img/e2e/blacklisted.svg');