PopupMenuを徹底的にアイコンにする
PopupMenuの文字を全てFontAwesomeに変える
2023-02-06 21:03:15 不要なCSSの詳細度を削った
少し高さを低くしてある
style.css/* 標準のtextをすべて消す */
.strong-button > strong, .italic-button > i, .strike-button > strike {
display: inline-block;
width: 0;
text-indent: -9999px;
}
/* これ以上詳細度を削ると、他のruleに上書きされてしまう */
.selections .popup-menu .button-container .button:is(.link-button, .new-page-button, .copy-plain-button) {
font-size: 0;
}
/* buttonにFontAwesomeを使う
*
* `.selections`で入力補完のpopup menuには適用しないようにする
*/
.selections .popup-menu .button-container .button {
font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-size: 11px;
line-height: 20px;
font-weight: 600;
display: inline-block;
text-align: center;
}
/* iconを設定する */
.link-button::after {
font-size: 11px;
content: '\f0c1'
}
.strong-button::after {
content: '\f032'
}
.italic-button::after {
content: '\f033'
}
.strike-button::after {
content: '\f0cc'
}
.copy-plain-button::after {
font-size: 11px;
content: '\f0c5'
}
.new-page-button::after {
font-size: 11px;
content: '\f0c4'
}
#2023-02-06 21:02:54
#2021-07-11 09:11:34