scrapbox-style-related-page-list
code:style.css
/**
*
*
*/
/**
*
* 全サイズ共通
*
*/
.page:is(div, main) {
/* ページ本体（下に余白を作ってスクロールしやすくする） */
margin-bottom: calc(100vh - 200px);
}
div.container div.page-column {
grid-template-columns: 5px minmax(98%, auto) min-content;
}
div.page-wrapper .related-page-list:is(div, section) ul.grid {
display: flex;
flex-wrap: wrap;
gap: 0px;
}
div.page-wrapper .related-page-list:is(div, section) .grid-style-item .content .description .line {
/**
* 本文の間に .related-page-list:is(div, section) の line 要素が反応してしまっていたのでオフにする
*/
pointer-events: none !important;
}
/**
* .related-page-list の数を変更
*
* width が 768px, 1000px, 1240px の違いによって変更する箇所
*/
@media (min-width: 768px) {
div.page-wrapper .related-page-list:is(div, section) {
flex-basis: 100px !important;
}
div.page-wrapper .related-page-list:is(div, section) .relation-label {
width: 100px !important;
}
}
@media (min-width: 1000px) {
div.page-wrapper .related-page-list:is(div, section) {
flex-basis: calc(100px * 2) !important;
}
div.page-wrapper .related-page-list:is(div, section) .relation-label {
width: calc(100px * 2) !important;
}
div.page-wrapper .related-page-list:is(div, section) .grid li.page-list-item.grid-style-item {
width: calc(100px - 2px) !important;
}
}
@media (min-width: 1240px) {
div.page-wrapper .related-page-list:is(div, section) {
flex-basis: calc(100px * 4) !important;
}
div.page-wrapper .related-page-list:is(div, section) .relation-label {
width: calc(100px * 4) !important;
}
div.page-wrapper .related-page-list:is(div, section) .grid li.page-list-item.grid-style-item {
width: calc(100px - 2px) !important;
}
}
/**
*
* width が 768px ある場合
*
*
*
*/
@media (min-width: 768px) {
div.page-wrapper {
display: flex;
}
div.page-wrapper .drag-and-drop-enter {
order: 2;
/* width: calc(100% - 200px); */
width: 100%;
margin-left: 20px;
min-width: 0;
}
div.page-wrapper .related-page-list:is(div, section) {
order: 1;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
div.page-wrapper .related-page-list:is(div, section) .grid li {
margin-bottom: 2px !important;
margin-right: 2px !important;
}
div.page-wrapper .related-page-list:is(div, section) .grid .splitter {
height: 15px !important;
}
/**
*
* toolbar
*
*/
.related-page-list:is(div, section) div.toolbar {
/* 関連ページリストのツールバー */
flex-direction: column;
align-items: flex-end;
height: auto;
grid-template-columns: min-content;
}
.related-page-list:is(div, section) div.toolbar .related-page-list-search {
/* 関連ページリストの検索ボックス */
flex-direction: row;
display: flex;
vertical-align: middle;
width: 100%;
}
.related-page-list:is(div, section) div.toolbar .related-page-list-search>.fa {
/* 検索アイコン */
vertical-align: middle;
height: fit-content;
margin: auto 1px;
}
.related-page-list:is(div, section) div.toolbar .related-page-list-search input {
/* 検索ボックスの入力欄の大きさを抑える */
max-width: 180px;
}
}
/**
*
* .relation-label は .related-page-list:is(div, section) の境目にあるやつ
*
*/
@media (min-width: 768px) {
.related-page-list:is(div, section) span.kamon::before {
/* 鎖マークの大きさ */
font-size: 14px;
}
.related-page-list:is(div, section) .grid li.relation-label {
/* ラベルサイズ変更 */
height: 25px;
margin-bottom: 2px;
}
.related-page-list:is(div, section) .grid li.relation-label .arrow {
display: none;
}
.related-page-list:is(div, section) li.relation-label a {
/* 関連リンク ラベル */
display: flex !important;
padding: 0 !important;
}
.related-page-list:is(div, section) li.relation-label a {
/* 関連リンク ラベル・カード（共通） */
border-radius: 0;
}
.related-page-list:is(div, section) ul.grid:hover li.relation-label a,
.related-page-list:is(div, section) div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク ラベル・カード（共通、ホバー時） */
transition: 0s;
}
.related-page-list:is(div, section) li.relation-label a:hover {
/* 関連リンク ラベル（ホバー時） */
filter: brightness(80%);
}
.related-page-list:is(div, section) li.relation-label a span.title {
/* リンクのタイトル文字がある空間（共通） */
border-top: 0;
width: 100%;
padding: 7px 3px;
margin-left: 42px;
text-align: left;
}
.related-page-list:is(div, section) li.relation-label a span.title {
/* リンクのタイトル文字がある空間（ラベル） */
padding: 0 3px;
}
.related-page-list:is(div, section) li.relation-label a span.title {
/* リンクのタイトル文字（共通） */
font-size: 14px;
font-weight: bold;
}
.related-page-list:is(div, section) li.relation-label a:hover span.title {
/* リンクのタイトル文字（共通、ホバー時） */
transition: 0s;
}
.related-page-list:is(div, section) li.relation-label a span.kamon.icon-lg {
/* リンクのアイコン */
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 30px;
height: 100%;
margin: 0;
margin-left: 6px;
padding: 0;
}
}
@media (min-width: 768px) {
.related-page-list:is(div, section) div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
}
.related-page-list:is(div, section) div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
}
}