ポップアップメニューをさっぱりさせてみる
久々にカスタマイズしてみたよー!
とりあえずデフォルトと並べてみよう。 Copy plain
までがデフォルトのボタンね。
やったこと
修飾ボタンをアイコン化
ボタン周りの線を削除
ついでに、カスタムボタンも絵文字にしてシンプルにしてます。このへんはお好みで。
style.css/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
script.js// フキダシ
scrapbox.PopupMenu.addButton({
title: '💬',
onClick: text => `[{ ${text}]`
})
2021-07-06 Font Awesome のアップデートに対応