generated at
_CSS_Page

ページを開いた時のスタイルを設定するUserCSS
現状、PCでの表示にしか対応していない。
スマホ表示は色の変更のみ。
関連リンク一覧のスタイルも大きく変えている(むしろそっちがメイン)
ページの横に来るようにしている。
スタイルをOdyssey風に。
↓のような雰囲気を目指した。
関連リンク一覧が横に来るCSSは、後日他のプロジェクトにも流用できるようにした


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); } .related-page-list:is(div, section) { order: 1; flex-basis: 216px; padding: 0 8px; background-color: var(--related-page-list-bg); } /* 関連リンク一覧形状変更 */ .related-page-list:is(div, section){ font-family: var(--relation-title-font); } .related-page-list:is(div, section) .grid li.relation-label, .related-page-list:is(div, section) li.page-list-item, .related-page-list:is(div, section) li.ellipsis { /* サイズ変更(共通) */ width: 200px; } .related-page-list:is(div, section) .grid li.relation-label { /* ラベルサイズ変更 */ height: var(--relation-label-height); margin-bottom: 0; } .related-page-list:is(div, section) li.page-list-item, .related-page-list:is(div, section) li.ellipsis { /* カードサイズ変更 */ height: 50px; margin-bottom: 3px; } .related-page-list:is(div, section) .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.page-list-item a:hover { /* 関連リンク カード(ホバー時) */ border-right: 6px solid var(--card-border-hover); } .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; } .related-page-list div.toolbar { /* 関連ページリストのツールバー */ flex-direction: column; align-items: flex-end; } .related-page-list div.toolbar .related-page-list-search { /* 関連ページリストの検索ボックス */ flex-direction: row; display: flex; vertical-align: middle; } .related-page-list div.toolbar .related-page-list-search > .fa { /* 検索アイコン */ vertical-align: middle; height: fit-content; margin: auto 1px; } .related-page-list div.toolbar .related-page-list-search input { /* 検索ボックスの入力欄の大きさを抑える */ max-width: 180px; } }