Include label in x-peer size transformation; Prevent use of transparency for status & displayName;

This commit is contained in:
schlagmichdoch 2024-02-05 02:12:44 +01:00
parent 1d81b744ea
commit e5a09b6be1

View file

@ -105,6 +105,8 @@ x-peer {
padding: 8px; padding: 8px;
align-content: start; align-content: start;
flex-wrap: wrap; flex-wrap: wrap;
transition: transform 150ms;
will-change: transform;
} }
x-peer input[type="file"] { x-peer input[type="file"] {
@ -122,8 +124,6 @@ x-peer label {
x-peer x-icon { x-peer x-icon {
--icon-size: 40px; --icon-size: 40px;
margin-bottom: 4px; margin-bottom: 4px;
transition: transform 150ms;
will-change: transform;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -149,7 +149,7 @@ x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
.highlight-wrapper { .highlight-wrapper {
align-self: center; align-self: center;
align-items: center; align-items: center;
margin: 7px auto 0; margin: 10px auto 0;
height: 6px; height: 6px;
} }
@ -188,14 +188,16 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
display: none; display: none;
} }
x-peer:not([status]):hover x-icon, x-peer:not([status]):hover,
x-peer:not([status]):focus x-icon { x-peer:not([status]):focus {
transform: scale(1.05); transform: scale(1.05);
} }
x-peer[status] x-icon { x-peer[status] x-icon {
box-shadow: none; box-shadow: none;
opacity: 0.8; }
x-peer[status] {
transform: scale(1); transform: scale(1);
} }
@ -238,7 +240,7 @@ x-peer.ws-peer .highlight-wrapper {
.status, .status,
.device-name { .device-name {
opacity: 0.7; color: color-mix(in srgb, rgb(var(--text-color)) 30%, grey);
white-space: nowrap; white-space: nowrap;
} }
@ -251,7 +253,7 @@ x-peer[status] {
pointer-events: none; pointer-events: none;
} }
x-peer x-icon { x-peer {
animation: pop 600ms ease-out 1; animation: pop 600ms ease-out 1;
} }