sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Switch emoji picker to use emoji for header icons (#31645)

Browse Source 
* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-07 10:22:26 +00:00
committed by GitHub
parent d7a58216ae
commit 7f057faaad
15 changed files with 27 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/emojipicker/_EmojiPicker.pcss
+10 -44
View File
@@ -31,17 +31,25 @@ Please see LICENSE files in the repository root for full details.
.mx_EmojiPicker_anchor {
border: none;
padding: 8px 8px 6px;
padding: var(--cpd-space-1x) 0;
font-size: $font-20px;
line-height: 1;
border-bottom: 2px solid transparent;
background-color: transparent;
border-radius: 4px 4px 0 0;
width: 36px;
height: 38px;
height: 36px;
color: $primary-content;
display: inline-block;
&:not(:disabled) {
cursor: pointer;
}
&:disabled {
filter: opacity(0.3);
}
&:not(:disabled):hover {
background-color: $focus-bg-color;
@@ -49,48 +57,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_EmojiPicker_anchor::before {
background-color: $primary-content;
content: "";
display: inline-block;
mask-size: 100%;
mask-repeat: no-repeat;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_anchor:disabled::before {
background-color: $focus-bg-color;
}
.mx_EmojiPicker_anchor_activity::before {
mask-image: url("$(res)/img/emojipicker/activity.svg");
}
.mx_EmojiPicker_anchor_flags::before {
mask-image: url("$(res)/img/emojipicker/flags.svg");
}
.mx_EmojiPicker_anchor_foods::before {
mask-image: url("$(res)/img/emojipicker/foods.svg");
}
.mx_EmojiPicker_anchor_nature::before {
mask-image: url("$(res)/img/emojipicker/nature.svg");
}
.mx_EmojiPicker_anchor_objects::before {
mask-image: url("$(res)/img/emojipicker/objects.svg");
}
.mx_EmojiPicker_anchor_people::before {
mask-image: url("$(res)/img/emojipicker/people.svg");
}
.mx_EmojiPicker_anchor_places::before {
mask-image: url("$(res)/img/emojipicker/places.svg");
}
.mx_EmojiPicker_anchor_recent::before {
mask-image: url("$(res)/img/emojipicker/recent.svg");
}
.mx_EmojiPicker_anchor_symbols::before {
mask-image: url("$(res)/img/emojipicker/symbols.svg");
}
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid $accent;
}