_CSS_related-page-list_left
2024/03/14 Infoboxの邪魔をしないように調整（応急処置）
2024/04/26 仕様変更に対応（応急処置）
code:style.css
@charset "UTF-8";
/* スマートフォンには適用しない */
@media screen and (min-width: 768px) {
.page-wrapper:not(:has(.has-literal-database)) .page {
margin-bottom: 30px;
}
/* ページメニューを固定 */
.row-flex:not(:has(.has-literal-database)) .col-page-side .page-menu {
position: fixed;
top: 100px;
}
.page-wrapper:not(:has(.has-literal-database)) .drag-and-drop-enter {
position: absolute;
left: calc(20vw + 30px);
width: calc(55vw + 60px);
margin-top: -30px;
padding-left: 40px;
/* 行番号表示が隠れないように設定 */
}
/* 関連ページを左ペイン化 */
.related-page-list:not(.has-literal-database) {
position: fixed;
left: 10px;
margin: -30px 20px 0 3vw;
/* -30pxの部分はプロジェクトタイトルの位置に応じて変えてください */
padding: 0 10px 0 20px;
width: 18vw;
/* 関連リンク一覧部分を独立してスクロール */
height: 86vh;
overflow-y: auto;
z-index: 20;
/* エディタ部分と領域が重なる可能性があるのでエディタより上層に設定 */
counter-reset: label;
/* 各要素を非表示 */
/* 「・・・」部分の調整 */
/* 関連ページ要素のカウント */
/* 各ラベルごとにページをナンバリング */
/* 検索欄に対応 */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label a .icon-lg,
.related-page-list:not(.has-literal-database) .grid li.relation-label .arrow,
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .description,
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .icon {
display: none;
}
.related-page-list:not(.has-literal-database) .grid {
width: 100%;
grid-template-columns: none;
gap: unset;
}
.related-page-list:not(.has-literal-database) .grid li {
width: 100%;
margin: 2px;
height: auto;
aspect-ratio: unset;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a {
background: unset;
border: unset;
box-shadow: unset;
}
.related-page-list:not(.has-literal-database) .grid li a .header {
padding: 0;
border-top: none;
/* 上部のライン非表示 */
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a {
background-color: var(--card-bg, #fff); /* 定義されているテーマでなければ白を設定 */
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .title {
font-size: 12px;
/* ページタイトルを小さめに表示 */
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .content {
height: 100%;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label {
width: 100%;
min-height: 33px;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label .title {
display: block;
font-size: 12px;
/* ラベルタイトルを小さめに表示 */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword a {
display: block;
/* ラベルの色 プロジェクトテーマに合わせて変えてください */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label:is(.links,.project-links,.empty-links) {
min-height: unset;
height: auto;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label:is(.links,.project-links,.empty-links) a {
display: block;
cursor: default;
/* クリックしても何も起こらないのにデフォルトのカーソルがリンク用になっているのが気になったため */
background: unset;
/* 「Links」のラベルの色 好きな色に設定してください */
margin: auto;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item.empty,
.related-page-list:not(.has-literal-database) .grid li.relation-label.empty-links {
display: none;
}
.related-page-list:not(.has-literal-database) .grid li.splitter.splitter {
height: auto;
}
.related-page-list:not(.has-literal-database) .grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.related-page-list:not(.has-literal-database) .grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword {
counter-increment: label;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword::before {
content: counter(label);
position: absolute;
display: block;
left: 0px;
z-index: 10;
text-align: right;
font-size: 12px;
/* テーマに合わせて変えてください */
}
.related-page-list:not(.has-literal-database) .grid {
counter-reset: item;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item {
counter-increment: item;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item::before {
content: counter(item);
position: absolute;
display: block;
left: -32px;
z-index: 10;
min-width: 30px;
text-align: right;
font-size: 12px;
}
.related-page-list:not(.has-literal-database) .toolbar {
display: block;
margin-bottom: 4px;
height: fit-content;
}
.related-page-list:not(.has-literal-database) .page-sort-menu {
line-height: unset;
height: fit-content;
text-align: right;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search {
display: block;
line-height: unset;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search .fa-spinner,
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search .fa-search {
position: absolute;
margin-top: -18px;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search input {
font-size: 14px;
border-radius: 2px;
background-color: white;
width: 100%;
margin-left: 2px;
}
.related-page-list .links-container {
gap: unset;
}
}
（2024/04/26対応前バージョン）
code:stylex.css
@charset "UTF-8";
/* スマートフォンには適用しない */
@media screen and (min-width: 768px) {
.page-wrapper:not(:has(.has-literal-database)) .page {
margin-bottom: 30px;
}
/* ページメニューを固定 */
.row-flex:not(:has(.has-literal-database)) .col-page-side .page-menu {
position: fixed;
top: 100px;
}
.page-wrapper:not(:has(.has-literal-database)) .drag-and-drop-enter {
position: absolute;
left: calc(20vw + 30px);
width: calc(55vw + 60px);
margin-top: -30px;
padding-left: 40px;
/* 行番号表示が隠れないように設定 */
}
/* 関連ページを左ペイン化 */
.related-page-list:not(.has-literal-database) {
position: fixed;
left: 10px;
margin: -30px 20px 0 3vw;
/* -30pxの部分はプロジェクトタイトルの位置に応じて変えてください */
padding: 0 10px 0 20px;
width: 18vw;
/* 関連リンク一覧部分を独立してスクロール */
height: 86vh;
overflow-y: auto;
z-index: 20;
/* エディタ部分と領域が重なる可能性があるのでエディタより上層に設定 */
counter-reset: label;
/* 各要素を非表示 */
/* 「・・・」部分の調整 */
/* 関連ページ要素のカウント */
/* 各ラベルごとにページをナンバリング */
/* 検索欄に対応 */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label a .icon-lg,
.related-page-list:not(.has-literal-database) .grid li.relation-label .arrow,
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .description,
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .icon {
display: none;
}
.related-page-list:not(.has-literal-database) .grid {
width: 100%;
}
.related-page-list:not(.has-literal-database) .grid li {
width: 100%;
margin: 2px;
height: auto;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a {
background: unset;
border: unset;
box-shadow: unset;
}
.related-page-list:not(.has-literal-database) .grid li a .header {
padding: 0;
border-top: none;
/* 上部のライン非表示 */
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a {
background-color: var(--card-bg, #fff); /* 定義されているテーマでなければ白を設定 */
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item a .title {
font-size: 12px;
/* ページタイトルを小さめに表示 */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label {
width: 100%;
min-height: 33px;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label .title {
display: block;
font-size: 12px;
/* ラベルタイトルを小さめに表示 */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword a {
display: block;
/* ラベルの色 プロジェクトテーマに合わせて変えてください */
}
.related-page-list:not(.has-literal-database) .grid li.relation-label:is(.links,.project-links,.empty-links) {
min-height: unset;
height: auto;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label:is(.links,.project-links,.empty-links) a {
display: block;
cursor: default;
/* クリックしても何も起こらないのにデフォルトのカーソルがリンク用になっているのが気になったため */
background: unset;
/* 「Links」のラベルの色 好きな色に設定してください */
margin: auto;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item.empty,
.related-page-list:not(.has-literal-database) .grid li.relation-label.empty-links {
display: none;
}
.related-page-list:not(.has-literal-database) .grid li.splitter.splitter {
height: auto;
}
.related-page-list:not(.has-literal-database) .grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.related-page-list:not(.has-literal-database) .grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword {
counter-increment: label;
}
.related-page-list:not(.has-literal-database) .grid li.relation-label.headword::before {
content: counter(label);
position: absolute;
display: block;
left: 0px;
z-index: 10;
text-align: right;
font-size: 12px;
/* テーマに合わせて変えてください */
}
.related-page-list:not(.has-literal-database) .grid {
counter-reset: item;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item {
counter-increment: item;
}
.related-page-list:not(.has-literal-database) .grid li.page-list-item::before {
content: counter(item);
position: absolute;
display: block;
left: -32px;
z-index: 10;
min-width: 30px;
text-align: right;
font-size: 12px;
}
.related-page-list:not(.has-literal-database) .toolbar {
display: block;
margin-bottom: 4px;
height: fit-content;
}
.related-page-list:not(.has-literal-database) .page-sort-menu {
line-height: unset;
height: fit-content;
text-align: right;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search {
display: block;
line-height: unset;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search .fa-spinner,
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search .fa-search {
position: absolute;
margin-top: -18px;
}
.related-page-list:not(.has-literal-database) .toolbar .related-page-list-search input {
font-size: 14px;
border-radius: 2px;
background-color: white;
width: 100%;
margin-left: 2px;
}
}