左側にリンクを表示するUserCSS
配置をFixedにしている理由は[チャンネル]などは大量にリンクされると思ったから(リンクだけでスクロールしたい)
2024/3/6
あまり使い勝手がよくないので個人で導入する形にしますwogikaze.icon
code:style.css
.related-page-list .toolbar .related-page-list-search:focus-within {
background-color: rgba(255, 255, 255, 0.15);
}
.related-page-list .toolbar .related-page-list-search:focus-within .fa-search,
.related-page-list .toolbar .related-page-list-search:focus-within .fa-spinner{ color: var(--tool-text-color);
}
.related-page-list .toolbar .related-page-list-search:focus-within input {
color: var(--tool-text-color);
}
code:style.csss
@media (min-width: 768px) {
/* 位置 */
.page-wrapper .related-page-list {
margin-top: 0;
padding: 6px 8px 20px;
width: 200px;
overflow-y: scroll;
}
.related-page-list .grid li.relation-label a {
padding: 0 8px;
background: inherit;
}
.related-page-list .grid li.relation-label a .title {
height: 24px;
font-size: 100%;
line-height: 24px;
white-space: nowrap;
}
.grid span.title::before {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 12px;
height: 12px;
width: 12px;
line-height: 25px;
padding-right: 5px;
}
.related-page-list .grid .page-list-item .hover {
display: none;
}
.related-page-list .grid .page-list-item .icon {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.related-page-list .grid .page-list-item .icon img {
height: 34px;
width: 34px;
object-fit: cover;
}
.related-page-list .grid .page-list-item .content {
height: 34px;
}
.related-page-list .grid .page-list-item .content .header {
width: auto;
border: none;
margin-left: 40px;
padding: 7px 0;
}
.related-page-list .grid .page-list-item.empty .content .header {
margin-left: 12px;
}
.page-wrapper .related-page-list.clearfix .grid:hover .relation-label a {
background: inherit;
}
.related-page-list .grid:hover .title::before {
}
.grid .page-list-item.grid-style-item a {
width: 100%;
background: inherit;
box-shadow: none !important;
}
.related-page-list .grid .page-list-item.grid-style-item:hover a {
background: rgba(79, 84, 92, 0.4);
}
.related-page-list>div:not(:first-child, :nth-child(2)) {
padding-top: 16px;
}
.related-page-list>div:last-child {
padding-bottom: 60px;
}
.col-page:not(:has(.stream)) {
margin-left: 200px;
width: calc(100% - 200px);
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.drag-and-drop-enter {
flex-grow: 1;
/* レイアウトが崩れないように */
max-width: 960px;
min-width: 0;
}
.related-page-list ul.grid {
width: calc(100% - 16px);
margin: auto;
}
.page-wrapper .related-page-list {
position: fixed;
left: 8px;
height: calc(100vh - 110px);
}
.related-page-list .grid .page-list-item .title {
display: block;
font-size: 15px;
white-space: nowrap;
}
.related-page-list .grid .page-list-item:hover .title {
}
.related-page-list .grid .page-list-item .content .description {
display: none;
}
.related-page-list li.page-list-item.grid-style-item {
margin: 2px 0;
width: 100%;
height: 34px;
}
.related-page-list .grid .expand-stack {
width: 100%;
height: 68px;
margin: 2px 0;
background: inherit;
}
.related-page-list .grid .expand-stack:hover a {
background: rgba(79, 84, 92, 0.4);
}
.related-page-list .grid .expand-stack a {
width: 100%;
display: inline-block;
padding-top: 12px;
}
.related-page-list .grid .ellipsis {
width: 100%;
height: 34px;
margin: 0;
display: flex;
justify-content: flex-end;
}
.related-page-list .grid .ellipsis a {
height: 34px;
width: 60px;
display: block;
}
.related-page-list .grid .ellipsis .circle {
height: 20px;
width: 40px;
}
background: rgba(79, 84, 92, 0.4);
}
.related-page-sort-menu {
height: 32px;
width: 100%;
margin: 5px 0;
}
.related-page-list .toolbar {
flex-direction: column;
height: fit-content;
}
.page-sort-menu .tool-btn {
border: 0;
box-shadow: none;
width: 100%;
}
.grid li.splitter.splitter {
display: none;
}
.grid li.relation-label .arrow {
display: none;
}
.grid li.relation-label a {
display: flex;
}
.grid li.relation-label a .icon-lg {
margin: 0;
line-height: 24px;
font-size: 17px;
width: 24px;
height: 24px;
}
.grid li.relation-label {
height: 24px;
margin: 0;
width: 100%;
}
.clearfix::-webkit-scrollbar {
visibility: hidden;
width: 5px;
}
.clearfix::-webkit-scrollbar-thumb {
visibility: hidden;
}
.clearfix::-webkit-scrollbar-track {
}
.clearfix:hover::-webkit-scrollbar {
visibility: visible;
width: 5px;
}
.clearfix:hover::-webkit-scrollbar-thumb {
visibility: visible;
width: 5px;
background: var(--body-bg);
}
.clearfix:hover::-webkit-scrollbar-track {
}
background: rgba(79, 84, 92, 0.4);
}
}
@media (min-width: 1092px) {
.page-wrapper .related-page-list {
width: 240px;
left: max(54px, calc(50% - 620px));
}
.col-page:not(:has(.stream)) {
margin-left: 260px;
width: calc(100% - 250px);
}
}
/* 関連ページ:change-log */
@media (min-width: 768px) {
section.related-page-list li.page-list-item.grid-style-item,
section.related-page-list .grid .page-list-item .content {
/* 高さがpx単位で指定されているのを修正 */
height: 100%;
}
/* アイコン画像を非表示にする（いちいち読み込むんでると負荷がかかるので） */
display: none;
}
/* 高さを狭くするための調整その１ */
padding: 1px 0;
}
/* 高さを狭くするための調整その２ */
font-size: 11px;
line-height: 20px; /* app.cssの値がこれだっただけ */
vertical-align: middle;
}
}
Streamの配置が右寄りになってしまっているtakker.icon
CSSの設定を変えたほうがよさそう
https://gyazo.com/8b0810072bf19c4d58d9c1cd11c40414
直したwogikaze.icon