diff --git a/src/fixes.less b/src/fixes.less index f186fa8..18edec2 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -35,6 +35,7 @@ div[class^="messagesWrapper-"] div { } #emoji-picker-tab-panel { + position: sticky; &:not([role="dialog"]) { // if add reaction (role=dialog), it breaks position: absolute; @@ -42,12 +43,21 @@ div[class^="messagesWrapper-"] div { left: 0; right: 0; } - div[class^="wrapper-"] { + & > div[class^="wrapper-"] { + background-color: var(--background-tertiary); top: 0; border-radius: 5px 0 0 5px; // for add reaction } } +#emoji-picker-grid { + div[class^="wrapper-"] { + border-radius: 16px; + top: 4px; + &:extend(.acrylic all); + } +} + div[class*="fullscreenOnMobile"] div[class^="flex"] * { // fix overflow overflow: hidden; diff --git a/src/materials.less b/src/materials.less index 9735eaa..770d6e5 100644 --- a/src/materials.less +++ b/src/materials.less @@ -46,6 +46,7 @@ div[class^="chat-"] background-color: var(--background-tertiary) !important; } +// Xbox-like glowing @keyframes glow { from { box-shadow: 0 0 2px 4px var(--interactive-normal); } to { box-shadow: 0 0 1px 2px var(--interactive-muted); } @@ -74,6 +75,7 @@ div[class^="chat-"] position: absolute; top: 0; bottom: 0; left: 0; right: 0; + width: 100%; height: 100%; content: ""; z-index: -1; } diff --git a/src/style.less b/src/style.less index 4809ffd..a6a6f6b 100644 --- a/src/style.less +++ b/src/style.less @@ -113,8 +113,9 @@ div[class^="content-"]::before, div[class^="tabBody-"]::before { box-shadow: unset !important; } -// Pins -div[class^="messageGroupWrapper-"] { +div[class^="contentWrapper-"], +div[class^="messageGroupWrapper-"], // Pins +{ border: none; background: unset; } @@ -175,6 +176,7 @@ div[class^="channelTextArea-"] { } } +div[class^="contentWrapper-"] > div, [role="menu"], [role="dialog"]:not([class^="focusLock-"]), div[class^="focusLock-"] > div,