mirror of https://github.com/vector-im/riot-web
				
				
				
			Merge pull request #3631 from matrix-org/bwindels/userinfo-css-fixes
Fix some styling regressions in member panelpull/21833/head
						commit
						f9b5678b06
					
				| 
						 | 
				
			
			@ -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;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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');
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue