vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: added emoji picker, various bug and layout fixes

Browse Source
This commit is contained in:
khannurien
2026-03-22 20:24:29 +00:00
parent a104113e05
commit c5051e3485
24 changed files with 384 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/App.css
View File

@@ -2722,8 +2722,8 @@ body.has-player .fab-new {
}
.comment-replies {
padding-left: 1.25rem;
margin-left: 1.1rem;
padding-left: max(0.4rem, calc(1.25rem - var(--depth, 0) * 0.1rem));
margin-left: max(0.25rem, calc(1.1rem - var(--depth, 0) * 0.09rem));
margin-top: 0.35rem;
border-left: 2px solid
color-mix(in srgb, var(--color-accent) 30%, transparent);
@@ -3193,6 +3193,74 @@ body.has-player .fab-new {
font-size: 0.9rem;
color: var(--color-text);
}
/* ── Emoji picker (frimousse) ── */
.emoji-picker-float {
position: absolute;
bottom: calc(100% + 4px);
left: 0;
z-index: 201;
width: 320px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.emoji-picker-float input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: none;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
font-size: 0.9rem;
outline: none;
}
.emoji-picker-float input::placeholder {
color: var(--color-text-muted, #888);
}
/* frimousse uses bare attributes (no data- prefix) */
.emoji-picker-float [frimousse-viewport] {
max-height: 220px;
/* frimousse already sets overflow-y: auto inline */
}
.emoji-picker-float [frimousse-category-header] {
padding: 4px 8px 2px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted, #888);
background: var(--color-surface);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.emoji-picker-float [frimousse-emoji] {
flex: 0 0 calc(100% / var(--frimousse-list-columns, 9));
background: none;
border: none;
padding: 4px 0;
font-size: 1.35em;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: background 0.1s;
}
.emoji-picker-float [frimousse-emoji]:hover,
.emoji-picker-float [frimousse-emoji][data-active] {
background: var(--color-bg);
}
.emoji-picker-float [frimousse-loading],
.emoji-picker-float [frimousse-empty] {
display: block;
padding: 16px;
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted, #888);
}
.notif-icon--mention {
font-weight: 700;
font-family: monospace;