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

Switch to svg masks for the e2eicon and border it for the EntityTile avatars

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-14 00:52:03 +01:00
parent 4d432f23e4
commit d4e397cbd0
6 changed files with 101 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

60
res/css/views/rooms/_E2EIcon.scss
View file

@ -22,28 +22,58 @@ limitations under the License.
display: block;
}
.mx_E2EIcon_warning::after,
.mx_E2EIcon_normal::after,
.mx_E2EIcon_verified::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: contain;
.mx_E2EIcon_warning,
.mx_E2EIcon_normal,
.mx_E2EIcon_verified {
&::before, &::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
// white infill for the transparency
.mx_E2EIcon::before {
background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
// transparent-looking border surrounding the shield for when overlain over avatars
.mx_E2EIcon_bordered {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-bg-color;
// shrink the actual badge
&::after {
mask-size: 75%;
}
// shrink the infill of the badge
&::before {
mask-size: 65%;
}
}
.mx_E2EIcon_warning::after {
background-image: url('$(res)/img/e2e/warning.svg');
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
.mx_E2EIcon_normal::after {
background-image: url('$(res)/img/e2e/normal.svg');
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: #020202; // TODO theme this
}
.mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg');
mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $accent-color;
}

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

@ -26,8 +26,6 @@ limitations under the License.
position: absolute;
bottom: 2px;
right: 7px;
height: 15px;
width: 15px;
}
}

43
res/css/views/rooms/_EventTile.scss
View file

@ -341,23 +341,58 @@ $left-gutter: 64px;
background-size: contain;
}
.mx_EventTile_e2eIcon {
&::before, &::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&::before {
background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
background-image: url('$(res)/img/e2e/warning.svg');
&::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1;
}
.mx_EventTile_e2eIcon_unknown {
background-image: url('$(res)/img/e2e/warning.svg');
&::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1;
}
.mx_EventTile_e2eIcon_unencrypted {
background-image: url('$(res)/img/e2e/warning.svg');
&::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1;
}
.mx_EventTile_e2eIcon_unauthenticated {
background-image: url('$(res)/img/e2e/normal.svg');
&::after {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: #020202; // TODO theme this
}
opacity: 1;
}