Progress Bar for Scrapbox

#misc

スクラップボックスで進捗管理するのに便利

https://gyazo.com/a8f8e9dc2b5cb345589188f3d0ce3240

2021.09.17

とりあえず作成

2021.09.18

ユーザースクリプトと併用することで太字記法も使えるように

2022.12.17

いつの間にか主要なブラウザでCSS疑似クラスの:has()がサポートされてたのでそちらを使うように変更

:has() - CSS: カスケーディングスタイルシート | MDN

スクリプトが不要になったためパブリックのScrapboxでも使える

使い方

[% 0%] で0%、[%* 10%] で10%

*の数で調整

注意点

これを使うとより太い太字 ([*** 太字]みたいなやつ) が使えなくなるので注意

UserScript との併用で解決

CSS疑似クラスの:has()が主要なブラウザでサポートされたことで解決

インポート構文

code:import.css

@import '/api/code/pon-no-blog/Progress_Bar_for_Scrapbox/style.css'

以下CSS

/icons/hr.icon

code:style.css

Scrapbox用の進捗バー

https://scrapbox.io/pon-no-blog/Progress_Bar_for_Scrapbox

.deco-\% {

display: inline-block !important; min-width: 10.0em; border-radius: .2em; border-style: solid; border-width: 1px; border-color: #888;

text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #222; font-size: 14px; line-height: 24px; font-weight: bold;

--bar-bgcolor: #fff; --bar-color: #000; --complete: 0%;

}

.line strong:has(.deco-\%) { line-height:100% !important; font-size: 16px !important; }

.line .level-1 .deco-\% { --bar-color: #FC446F; --complete: 10%; }

.line .level-2 .deco-\% { --bar-color: #FC446F; --complete: 20%; }

.line .level-3 .deco-\% { --bar-color: #FC446F; --complete: 30%; }

.line .level-4 .deco-\% { --bar-color: #FF9A42; --complete: 40%; }

.line .level-5 .deco-\% { --bar-color: #FF9A42; --complete: 50%; }

.line .level-6 .deco-\% { --bar-color: #FF9A42; --complete: 60%; }

.line .level-7 .deco-\% { --bar-color: #FF9A42; --complete: 70%; }

.line .level-8 .deco-\% { --bar-color: #38FFB9; --complete: 80%; }

.line .level-9 .deco-\% { --bar-color: #38FFB9; --complete: 90%; }

.line .level-10 .deco-\% { --bar-color: #38FFB9; --complete: 100%; }

.deco-\% { background: linear-gradient(to right, var(--bar-color) var(--complete), var(--bar-bgcolor) var(--complete), var(--bar-bgcolor)) !important; }

以下のCSSとスクリプトは従来のバージョン

code:style.old.css