Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-27 00:48:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make reactions background use the frosted glass look

Browse Source
This commit is contained in:
Timo 2024-11-15 16:53:48 +01:00
parent c1208ac7b6
commit 94cb0e1a4a
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/reactions/ReactionIndicator.module.css
View File

@ -1,19 +1,25 @@
.reactionIndicatorWidget { .reactionIndicatorWidget {
display: flex; display: flex;
background-color: var(--cpd-color-bg-subtle-primary); /* background-color: var(--cpd-color-bg-subtle-primary); */
border-radius: var(--cpd-radius-pill-effect); border-radius: var(--cpd-radius-pill-effect);
color: var(--cpd-color-icon-secondary); box-shadow: 0 0 var(--cpd-space-2x) #00000040;
background: "ffffff40";
backdrop-filter: blur(10px);
outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
outline-offset: calc(-1 * var(--cpd-border-width-1));
} }
.reactionIndicatorWidget > p { .reactionIndicatorWidget > p {
padding: none; padding: none;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
width: 4em; width: 3em;
} }
.reactionIndicatorWidgetLarge > p { .reactionIndicatorWidgetLarge > p {
padding: var(--cpd-space-2x); padding: var(--cpd-space-2x);
padding-right: var(--cpd-space-4x);
padding-left: 0;
} }
.reactionLarge { .reactionLarge {
@ -25,13 +31,13 @@
.reaction { .reaction {
margin: var(--cpd-space-1x); margin: var(--cpd-space-1x);
color: var(--cpd-color-icon-secondary); color: var(--cpd-color-icon-secondary);
background-color: var(--cpd-color-icon-secondary); /* background-color: var(--cpd-color-icon-secondary); */
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: var(--cpd-radius-pill-effect); border-radius: var(--cpd-radius-pill-effect);
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
box-shadow: var(--small-drop-shadow); /* box-shadow: var(--small-drop-shadow); */
box-sizing: border-box; box-sizing: border-box;
max-inline-size: 100%; max-inline-size: 100%;
max-width: fit-content; max-width: fit-content;