ポップアップメニューをさっぱりさせてみる

https://gyazo.com/0072c18302e62518802c0937448a702c

久々にカスタマイズしてみたよー！

とりあえずデフォルトと並べてみよう。 Copy plain までがデフォルトのボタンね。

https://gyazo.com/0072c18302e62518802c0937448a702c https://gyazo.com/776f19b30234520b8dbf1806e746d4f3

やったこと

修飾ボタンをアイコン化

ボタン周りの線を削除

ついでに、カスタムボタンも絵文字にしてシンプルにしてます。このへんはお好みで。

📯 はんこ記法的なやつ

code: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 }

ポップアップメニューのボタンを作るスクリプトはこんな感じ。

code:script.js

// フキダシ

scrapbox.PopupMenu.addButton({

title: '💬',

onClick: text => [{ ${text}]

})

2021-07-06 Font Awesome のアップデートに対応