calckeyでも使えるみたいです
こちらのページを参考に変更しています(絵文字画面のカテゴリ表示がちょっと変わります)
https://misskey.io/@ikakonbu/pages/1686675880709
横長文字用にオプションの部分を変更して横長文字用の視認性を上げたものが以下のCSSです
画像のような感じになります
めんどくさいのでコピペしたい人向け全文が以下
/*不定幅の絵文字をある程度横長に表示してもいいと許すCSS*/
/*各種オプション 各自で調整してください*/
:root {
/*絵文字サイズ*/
--emoji_default_size: 30px;
/*絵文字どうしの間の余白(横)*/
--emoji_margin_lr: 4px;
/*絵文字どうしの間の余白(上下)*/
--emoji_margin_tb: 2px;
/*横長の絵文字がどこまで横に広がってもいいか*/
--emoji_max_size: 999px;
/*上のサイズより横幅がでかい絵文字が出たとき、どう表示するか
fill 絵文字画像をつぶして、無理やり収める
contain 絵文字の画像サイズを小さくして、最大サイズにおさまるようにする
cover はみ出た分は表示しない*/
--emoji_displey_style: contain;
}
/*コード*/
.emojis section{
padding: 5px 5px;
text-align:center;
}
.emojis section>.body {
display: inline !important;
padding: 0 !important;
line-height: var(--emoji_default_size);
}
button:has(.emoji){
aspect-ratio: auto!important;
width: fit-content !important;
contain: layout !important;
margin: var(--emoji_margin_tb) var(--emoji_margin_lr) !important;
height: var(--emoji_default_size) !important;
}
button:has(.emoji) img{
height: var(--emoji_default_size) !important;
object-fit: var(--emoji_displey_style);
object-position: 0% 50%;
max-width: var(--emoji_max_size);
}