studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make reactions background use the frosted glass look (#2792)

Browse Source 
* Make reactions background use the frosted glass look

* fix spacing if there is raise hand + reaction.
This commit is contained in:
Timo
2024-11-15 18:58:40 +01:00
committed by GitHub
parent 01b9d7a70e
commit a551cde47b
2 changed files with 12 additions and 6 deletions
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;

2
src/tile/MediaView.tsx
View File

@@ -102,7 +102,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
)} )}
</div> </div>
<div className={styles.fg}> <div className={styles.fg}>
<div style={{ display: "flex" }}> <div style={{ display: "flex", gap: "var(--cpd-space-1x)" }}>
<RaisedHandIndicator <RaisedHandIndicator
raisedHandTime={raisedHandTime} raisedHandTime={raisedHandTime}
miniature={avatarSize < 96} miniature={avatarSize < 96}