Fix emoji picker colors and size.

This commit is contained in:
John Livingston 2024-09-11 12:40:23 +02:00
parent 0b196805b2
commit b66b0aa315
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 37 additions and 4 deletions

View File

@ -24,6 +24,7 @@ It also requires NodeJS 16 or superior (same as Peertube 5.2.0.)
* Fix race condition in bot/ctl. * Fix race condition in bot/ctl.
* Various type improvements. * Various type improvements.
* Update dependencies. * Update dependencies.
* Fix emoji picker colors and size.
## 11.0.1 ## 11.0.1

View File

@ -51,6 +51,10 @@
// Fixing emoji colors for some emoji like «motorcycle» // Fixing emoji colors for some emoji like «motorcycle»
converse-emoji-picker { converse-emoji-picker {
// Must set display block. Without this, Converse defined max-width will not apply.
// Don't really know why it is working in pure ConverseJs and not in livechat.
display: block;
.emoji-picker { .emoji-picker {
.insert-emoji { .insert-emoji {
a { a {
@ -60,13 +64,17 @@
} }
.emoji-picker__header { .emoji-picker__header {
color: var(--peertube-main-background); background-color: var(--peertube-main-background);
background-color: var(--peertube-main-foreground); color: var(--peertube-main-foreground);
.emoji-search {
color: currentcolor;
}
ul { ul {
.emoji-category { .emoji-category {
color: var(--peertube-main-background); background-color: var(--peertube-main-background);
background-color: var(--peertube-main-foreground); color: var(--peertube-main-foreground);
a { a {
color: currentcolor; color: currentcolor;

View File

@ -229,3 +229,27 @@ body.converse-embedded {
} }
} }
} }
// When livechat has not many height, must reduce the emoji picker height.
/* stylelint-disable-next-line no-duplicate-selectors */
#conversejs {
&[livechat-converse-root-height="small"] {
converse-emoji-picker {
converse-emoji-picker-content {
.emoji-picker__lists {
height: 2em;
}
}
}
}
&[livechat-converse-root-height="medium"] {
converse-emoji-picker {
converse-emoji-picker-content {
.emoji-picker__lists {
height: 4em;
}
}
}
}
}