settings
code:style.css
背景色変更
code:style.css
body {
background-color: #2436f2;
}
左側アイコンの色
code:style.css
.page-menu .tool-btn {
background-color: #0cf246 !important; /* 背景だけ白 */
color: #000000 !important; /* テキストやアイコンを黒に */
fill: #000000 !important; /* SVGなどの塗りも黒に */
}
右側にリンク
code:style.css
@media (min-width: 768px) {
/* 要素横並び */
div.page-wrapper {
display: flex;
justify-content: space-around;
}
div.col-page {
max-width: calc(960px + 216px + 34px);
}
.page:is(div, main) {
margin-bottom: calc(100vh - 200px);
}
div.drag-and-drop-enter {
order: 1; /* ページ本体を左に */
width: calc(100% - 250px);
}
.related-page-list:is(div, section) {
order: 2; /* 関連ページを右に */
flex-basis: 216px;
padding: 0 8px;
position: sticky;
top: 60px; /* 固定位置（ヘッダー下）を調整 */
align-self: flex-start; /* コンテナ内スクロール対策 */
height: fit-content;
}
/* 検索ボックス非表示 */
.related-page-list div.toolbar {
display: none;
}
/* 以下、表示調整 */
.related-page-list:is(div, section) .grid {
gap: 0;
}
.related-page-list:is(div, section) .links-container {
gap: 1em;
}
.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;
aspect-ratio: unset;
}
.related-page-list:is(div, section) .grid li.relation-label {
height: auto;
margin-bottom: 2px;
}
.related-page-list:is(div, section) li.page-list-item,
.related-page-list:is(div, section) li.ellipsis,
.related-page-list:is(div, section) li.expand-stack {
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;
align-items: stretch;
}
.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 li.relation-label a:hover {
filter: brightness(80%);
}
.related-page-list li.ellipsis a {
padding: 0;
}
.related-page-list li.ellipsis a div.circle {
height: auto;
}
.related-page-list li.expand-stack {
width: 200px;
margin-bottom: 6px;
}
.related-page-list li.expand-stack a {
display: block;
width: 200px;
padding: 7px 3px 7px 42px;
text-align: left;
}
.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;
}
.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-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 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: 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 .related-page-list-search {
display: none;
}
.related-page-list div.toolbar .related-page-list-search > .fa {
display: none;
}
.related-page-list div.toolbar .related-page-list-search input {
display: none;
}
}
右上のプルダウン系の色
code:style.css
/* 上部バー全体（背景色） */
.top-bar {
background-color: #1a1a2e !important; /* 背景色を暗く変更 */
}
/* ドロップダウンボタン（例: Modified, Allなど） */
a.btn.tool-btn.dropdown-toggle {
background-color: #0cf246 !important; /* ボタンの背景色 */
color: #000000 !important; /* テキスト色 */
border: none !important; /* 枠線削除（任意） */
}
/* ホバー時の色変更（任意） */
a.btn.tool-btn.dropdown-toggle:hover {
background-color: #ffff4c !important;
}
/* ドロップダウンメニューの背景色とテキスト色 */
ul.dropdown-menu {
background-color: #333355 !important;
color: #ffffff !important;
}
/* ドロップダウンメニュー内のリンク */
ul.dropdown-menu a {
color: #ffffff !important;
}
/* 選択状態の項目 */
ul.dropdown-menu .selected {
background-color: #555577 !important;
}
タグをラベル風に
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #000000;
font-size: 0.8em;
border: 1px solid #000000;
border-radius: 0px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1);
transform: scale(1);
color: #000000;
border: 1px solid #000000;
}
ピン留めを段落分け
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}