generated at
関連ページ一覧をページの横に表示するUserCSS(井戸端版)
注意
/ed/_CSS_Pageから雑にコピペしたので、無駄な記述がそこそこ残っています
そしてここのCSSはもう既にサポートしていません!

概要
Mijinko_SDが個人的に使っている井戸端用UserCSSの1つ。
/ed/_CSS_Pageから流用した
元と同様に、スマホ版サイト表示では無効化される。
井戸端版とは言うけど、プロジェクト設定のテーマが Default Light であればどのプロジェクトでも使えると思う。
それ以外のテーマでの動作検証はしていない。
動かなかったらの変数を調整して

ソースコード
使う時はスタイルの両方を自分のページコピーしてください
スタイルだけコピーすると表示が一部バグります。
コピーせずに直接インポートしても構いませんが、自己責任でお願いします。
特に、Mijinko_SDがソースを修正している最中は直接影響を受けてしまいます。

style.css
body { --card-hover-bg : rgba(0, 0, 0, 0.05); --relation-label-2-hop-bg : #333; --relation-label-2-hop-hover-bg: #666; --relation-label-height : 20px; /* 関連リンクのラベルの高さ */ }

任意で body に以下の変数を追加できる
css
--card-border : ; /* 関連リンクの右側のライン */ --card-hover-title-color: ; /* 関連リンクをホバーした時のタイトル文字の色 */ --related-page-list-bg : ; /* 関連リストエリアの背景 */ --relation-title-font : ; /* 関連リンクのタイトル文字のフォント */ --relation-label-border : ; /* 関連リンクのラベルの下の線 */

スタイル
style.css
@media (min-width: 768px) { /* 要素横並び */ div.page-wrapper { display: flex; justify-content: space-around; } div.col-page { max-width: calc(960px + 216px + 34px) } div.drag-and-drop-enter { order: 2; width: calc(100% - 250px); } div.related-page-list { order: 1; flex-basis: 216px; padding: 0 8px; background-color: var(--related-page-list-bg); } /* 関連リンク一覧形状変更 */ div.related-page-list{ font-family: var(--relation-title-font); } div.related-page-list .grid li.relation-label, div.related-page-list li.page-list-item, div.related-page-list li.ellipsis { /* サイズ変更(共通) */ width: 200px; } div.related-page-list .grid li.relation-label { /* ラベルサイズ変更 */ height: var(--relation-label-height); margin-bottom: 0; } div.related-page-list li.page-list-item, div.related-page-list li.ellipsis { /* カードサイズ変更 */ height: 50px; margin-bottom: 3px; } div.related-page-list .grid li.relation-label .arrow { display: none; } .related-page-list li.relation-label a { /* 関連リンク ラベル */ display: flex !important; padding: 0 !important; background-color: inherit; border-bottom: 2px solid var(--relation-label-border); } .related-page-list li.page-list-item a { /* 関連リンク カード */ border-right: 6px solid var(--card-border); } .related-page-list li.relation-label a, .related-page-list li.page-list-item a { /* 関連リンク ラベル・カード(共通) */ border-radius: 0; } .related-page-list ul.grid:hover li.relation-label a, .related-page-list div.links-2-hop ul.grid:hover li.relation-label a, .related-page-list li.page-list-item a:hover { /* 関連リンク ラベル・カード(共通、ホバー時) */ transition: 0s; } .related-page-list div.links-2-hop ul.grid li.relation-label a { /* 関連リンク 2 hops link ラベル */ background-color: var(--relation-label-2-hop-bg); } .related-page-list div.links-2-hop ul.grid:hover li.relation-label a { /* 関連リンク 2 hops link ラベル(ホバー時) */ background-color: var(--relation-label-2-hop-hover-bg); } .related-page-list li.relation-label a:hover { /* 関連リンク ラベル(ホバー時) */ filter: brightness(80%); } .related-page-list li.page-list-item a:hover { /* 関連リンク カード(ホバー時) */ /* background-color: var(--card-hover-bg); */ } .related-page-list li.ellipsis a { /* 2 hopが大きすぎるときに出る三点ボタン */ padding: 0; } .related-page-list li.ellipsis a div.circle { /* 三点ボタンをホバーした時に表示される丸 */ height: auto; } .related-page-list span.kamon::before { /* 鎖マークの大きさ */ font-size: 14px; } .related-page-list li.page-list-item .content > .description { display: none; } .related-page-list li.relation-label a span.title, .related-page-list ul.grid li.page-list-item a .header { /* リンクのタイトル文字がある空間(共通) */ border-top: 0; width: 158px; padding: 7px 3px; margin-left: 42px; text-align: left; } .related-page-list li.relation-label a span.title { /* リンクのタイトル文字がある空間(ラベル) */ padding: 0 3px; line-height: var(--relation-label-height); } .related-page-list ul.grid li.page-list-item a .header { /* リンクのタイトル文字がある空間(カード) */ padding: 7px 3px; } .related-page-list li.relation-label a span.title, .related-page-list ul.grid li.page-list-item a .header .title { /* リンクのタイトル文字(共通) */ font-family: var(--relation-title-font); font-size: 14px; font-weight: bold; } .related-page-list li.relation-label a:hover span.title, .related-page-list ul.grid li.page-list-item a:hover .header .title { /* リンクのタイトル文字(共通、ホバー時) */ transition: 0s; } .related-page-list li.relation-label a:hover span.title { /* リンクのタイトル文字(ラベル、ホバー時) */ } .related-page-list ul.grid li.page-list-item a:hover .header .title { /* リンクのタイトル文字(カード、ホバー時) */ color: var(--card-hover-title-color); } .related-page-list ul.grid li.page-list-item a:hover .hover { /* opacity: 0 !important; */ } .related-page-list li.relation-label a span.kamon.icon-lg, .related-page-list ul.grid li.page-list-item a .icon { /* リンクのアイコン */ display: flex; position: absolute; align-items: center; justify-content: center; width: 30px; margin: 0; margin-left: 6px; padding: 0; } .related-page-list li.relation-label a span.kamon.icon-lg { /* リンクのアイコン(ラベル) */ /* height: 25px; */ height: 100%; } .related-page-list ul.grid li.page-list-item a .icon { /* リンクのアイコン(カード) */ height: 50px; } .related-page-list ul.grid li.splitter { height: 5px; } }

scrapbox-text-bubbleを修正するためのCSS
ScrapScriptsを使っていない人は不要。
disabled-style.css
.daiiz-text-bubble.related-page-list.daiiz-card.daiiz-card-root { background-color: #ffffff; }